<template>
  <div class="container">
    <div class="sim-menuBar" :v-model="lanage === 'CN'
      ? (menu_txt_cur = menu_txt.CN)
      : (menu_txt_cur = menu_txt.EN)
      ">
      <!-- 特征提取 -->
      <div class="sim-topiconcard" @click="showFeatureExtractionModelConfig()">
        <i class="fas fa-info-circle"></i>
        <p>{{ menu_txt_cur.FE }}</p>
      </div>

      <!-- 水文前处理 -->
      <div class="sim-topiconcard" @click="showConfigCard('HydroProProcessCard')">
        <i class="fa-solid fa-screwdriver"></i>
        <p>{{ menu_txt_cur.HydroProProcess }}</p>
      </div>

      <!-- 初始化状态 -->
      <div class="sim-topiconcard" @click="showConfigCard('InitStausCard')">
        <i class="fa-solid fa-gears"></i>
        <p>{{ menu_txt_cur.Initstaus }}</p>
      </div>

      <div class="sim-topiconcard" @click="showConfigCard('FlowSimconfigCard')">
        <i class="fas fa-water"></i>
        <p>{{ menu_txt_cur.WS }}</p>
      </div>

      <!-- <el-dropdown @command="hydrAnalysis">
        <div class="sim-topiconcard">
          <i class="fas fa-water"></i>
          <p>水文分析</p>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="1">流域初始化</el-dropdown-item>
          <el-dropdown-item command="2">子流域划分</el-dropdown-item>
          <el-dropdown-item command="3">模型模拟</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown> -->
      <!-- 敏感性分析 -->
      <!-- <div class="sim-topiconcard" @click="showSA = !showSA">
        <i class="fas fa-chart-area"></i>
        <p>敏感性分析</p>
        
      </div> -->

      <div class="sim-topiconcard" @click="showConfigCard('CAconfigCard')">
        <i class="fa-solid fa-chart-pie"></i>
        <!-- <font-awesome-icon icon="cloud-showers-water" /> -->
        <p>{{ menu_txt_cur.PC }}</p>
      </div>
      <!-- 水文集合预报 -->
      <div class="sim-topiconcard" @click="showConfigCard('EnsembleForecast')">
        <font-awesome-icon class="font-icon" icon="cloud-showers-water" />
        <p>{{ menu_txt_cur.WF }}</p>
      </div>


      <!-- 实时集合预报 -->
      <!-- <div class="sim-topiconcard" @click="showConfigCard('realTimeEnsembleForecast')">
        <font-awesome-icon class="font-icon" icon="cloud-showers-heavy" />
        <p>{{ menu_txt_cur.HF }}</p>
      </div> -->
      <!-- 水文后处理 -->
      <div class="sim-topiconcard" @click="showConfigCard('HydroPostProConfig')">
        <i class="fa-solid fa-chart-column"></i>
        <p>{{ menu_txt_cur.HR }}</p>
      </div>
      <el-divider direction="vertical"></el-divider>
      <!-- 降雨预报评价 -->
      <div class="sim-topiconcard" @click="showConfigCard('verification')">
        <i class="fa-solid fa-circle-check"></i>

        <p>{{ menu_txt_cur.VE }}</p>
      </div>
      <!-- 敏感性分析 -->
      <div class="sim-topiconcard" @click="showSA = !showSA">
        <i class="fa-solid fa-chart-line"></i>
        <p>{{ menu_txt_cur.SA }}</p>
      </div>
      <!-- 模拟结果 -->
      <div class="sim-topiconcard" @click="showSimulationResult()">
        <i class="fas fa-poll"></i>
        <p>{{ menu_txt_cur.SR }}</p>
      </div>
      <!-- 模型库 -->
      <div class="sim-topiconcard" @click="showConfigCard('ModelRepository', 'left')">
        <i class="fa-solid fa-cubes"></i>
        <p>{{ menu_txt_cur.ML }}</p>
      </div>
      <!-- 数据处理 -->
      <div class="sim-topiconcard">
        <i class="fas fa-tools"></i>
        <p>{{ menu_txt_cur.DP }}</p>
      </div>
      <!-- 工具箱 -->
      <div class="sim-topiconcard" @click="showToolsBox = !showToolsBox">
        <i class="fa-solid fa-toolbox"></i>
        <p>{{ menu_txt_cur.TL }}</p>
      </div>
    </div>

    <div id="featureExtract" class="configCard-slider">
      <div class="title">
        <div class="titleIcon">
          <font-awesome-icon class="font-icon" style="margin-right: 5px" icon="fa-solid fa-circle-check" />
          <p>流域提取</p>
        </div>
        <div class="exitIcon" @click="showFeatureExtractionModelConfig()">
          <i class="far fa-times-circle"></i>
        </div>
      </div>
      <div class="container" id="realTimeEnsembleForecastContainer" v-loading.lock="verificationLoader"
        element-loading-text="流域提取中 ...">
        <el-form ref="verform" :model="importModelForm" label-width="120px" class="verification">
          <el-form-item label="流域">
            <el-input v-model="importModelForm.basin" disabled></el-input>
          </el-form-item>

          <el-form-item label="站点">
            <el-input v-model="importModelForm.station" disabled></el-input>
          </el-form-item>
          <el-form-item label="水文模型">
            <el-select v-model="importModelForm.selectedimportModel" placeholder="请选择模型">
              <el-option v-for="item in importModelForm.importModelOptions" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="气象观测">
            <el-select v-model="importModelForm.selectedimportHIS" placeholder="请选择气象数据源">
              <el-option v-for="item in importModelForm.ST_FORCE_HIS" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="历史气象预报">
            <el-select v-model="importModelForm.reforecastdata1" placeholder="请选择历史气象数据源">
              <el-option v-for="item in importModelForm.reforecastdata" :key="item.value" :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>




          <el-form-item label-width="0" class="btnGroup">
            <el-button type="primary" @click="importModel()">确定</el-button>
            <el-button @click="showFeatureExtractionModelConfig()">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 地图展示界面 -->
    <div id="mapDiv" class="mapDiv" @mousemove="mousemove" @mousedown="mouseDown"
      v-bind:class="{ pointer: cursor_pointer }">
      <div class="mapLayersContainer">
        <i class="fas fa-layer-group" @click="showMapLayers = !showMapLayers"></i>
        <div class="mapLayersCard" v-show="showMapLayers">
          <div class="mapLayerGroup">
            <div class="layerGroupTitle">
              <p>天地图</p>
            </div>
            <div class="layerGroupContent">
              <div class="layerbox" @click="showBackLayer(1.1)">
                <img src="/layerImages/tdtMap.png" alt="" />
                <p>地图</p>
              </div>
              <div class="layerbox" @click="showBackLayer(1.2)">
                <img src="/layerImages/tdtImg.png" alt="" />
                <p>影像</p>
              </div>
              <div class="layerbox" @click="showBackLayer(1.3)">
                <img src="/layerImages/tdtTer.png" alt="" />
                <p>地形</p>
              </div>
            </div>
          </div>
          <div class="mapLayerGroup">
            <div class="layerGroupTitle">
              <p>谷歌地图</p>
            </div>
            <div class="layerGroupContent">
              <div class="layerbox" @click="showBackLayer(2.1)">
                <img src="/layerImages/tdtMap.png" alt="" />
                <p>地图</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 鼠标坐标显示 -->
      <div class="lonlatcontainer">
        <span>{{ lonlat }}</span>
      </div>
      <!-- 流域初始化信息配置卡片 -->
      <div class="sim-boxcard" v-drag v-if="watershedIniTag">
        <div class="sim-boxcardTitle">
          <!-- <img src="../assets/icon/new/初始化1.svg" />
          <p>流域初始化</p>
           -->
          <div class="sim-boxcardTitle title-content">
            <img src="../assets/icon/new/初始化1.svg" />
            <p>流域初始化</p>
          </div>

          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="watershedIniTag = !watershedIniTag"></i>
          </div>
        </div>
        <div class="cardContent">
          <div class="content1">
            <label class="lable">最小坐标：</label>
            <div class="input">
              <el-input v-model="watershedMinLonLat" size="small" placeholder="MinLon, MinLat" clearable>
              </el-input>
            </div>
          </div>
          <div class="content2">
            <label class="lable">最大坐标：</label>
            <div class="input">
              <el-input v-model="watershedMaxLonLat" size="small" placeholder="MaxLon, MaxLat" clearable>
              </el-input>
            </div>
          </div>
          <div class="content3">
            <label class="lable">出水口坐标：</label>
            <div class="input">
              <el-input v-model="outletLonLat" size="small" placeholder="Lon,Lat" clearable>
              </el-input>
            </div>
          </div>
          <div class="content4">
            <div class="content4_1" v-show="basinInitialLoadingTag">
              <span class="el-icon-loading loading"></span>
              <span class="loadText">计算中...</span>
            </div>
            <div class="content4_2">
              <el-button size="medium" @click="basinInitial" :disabled="basinInitialbtndisableTag">确定</el-button>
              <el-button size="medium" @click="watershedIniTag = !watershedIniTag">取消</el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 子流域划分 -->
      <div class="sim-boxcard" v-drag v-if="addOutletTag">
        <div class="sim-boxcardTitle">
          <!-- <img src="../assets/icon/new/control_point.svg" alt="" />
          <p>添加水文站信息</p> -->
          <div class="sim-boxcardTitle title-content">
            <img src="../assets/icon/new/control_point.svg" alt="" />
            <p>添加水文站信息</p>
          </div>

          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="addOutletTag = !addOutletTag"></i>
          </div>
        </div>
        <div class="cardContent">
          <div class="content1">
            <label class="lable">流域名称：</label>
            <div class="input">
              <el-input v-model="outletWashedtName" size="small" placeholder="水文站以上流域的名称" clearable>
              </el-input>
            </div>
          </div>
          <div class="content2">
            <label class="lable">水文站名称：</label>
            <div class="input">
              <el-input v-model="outletName" size="small" placeholder="水文站点名称" clearable>
              </el-input>
            </div>
          </div>
          <div class="content3">
            <label class="lable">水文站坐标：</label>
            <div class="input">
              <el-input v-model="outletCor" size="small" placeholder="Lon,Lat" clearable>
              </el-input>
              <img class="pickupicon" src="../assets/icon/new/拾取.svg" alt="" @click="drawPoint" />
            </div>
          </div>
          <div class="content4">
            <div class="content4_1" v-show="addOutletLoadingTag">
              <span class="el-icon-loading loading"></span>
              <span class="loadText">计算中...</span>
            </div>
            <div class="content4_2">
              <el-button size="medium" @click="DivideSubBasin" :disabled="addOutletbtndisableTag">子流域划分
              </el-button>
              <el-button size="medium" @click="addOutletTag = !addOutletTag">
                取消
              </el-button>
            </div>
          </div>
        </div>
      </div>
      <!-- 图层信息卡片 -->
      <div class="sim-boxcard sim-layercard" v-drag v-show="showLayerCard">
        <div class="sim-boxcardTitle">
          <!-- <i class="fas fa-layer-group"></i>
          <p>图层信息</p> -->

          <div class="sim-boxcardTitle title-content">
            <i class="fas fa-layer-group"></i>
            <p>图层信息</p>
          </div>

          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="showLayerCard = !showLayerCard"></i>
          </div>
        </div>
        <div class="sim-boxcardContent">
          <el-tree :data="layersData" @check-change="layertreeCheckChange" show-checkbox :highlight-current="true"
            node-key="id" :default-expanded-keys="defaultExpandLayerID" :default-checked-keys="defaultCheckedLayerID"
            ref="layertree" style="background-color: rgba(255, 255, 255, 0)">
          </el-tree>
        </div>
      </div>
      <!-- 工具箱卡片 -->
      <div class="sim-boxcard sim-toolsboxcard" v-drag v-show="showToolsBox">
        <div class="sim-boxcardTitle">
          <!-- <i class="fas fa-tools"></i>
          <p>工具箱</p> -->

          <div class="sim-boxcardTitle title-content">
            <i class="fas fa-tools"></i>
            <p>工具箱</p>
          </div>

          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="showToolsBox = !showToolsBox"></i>
          </div>
        </div>
        <div class="sim-boxcardContent sim-toolsboxContent">
          <!-- 常规操作栏 -->
          <div class="sim-toolsbox-subcontent">
            <!-- 选择 -->
            <div class="sim-toolsbox-iconcard" @click="cursor_pointer = false">
              <div class="sim-toolsbox-iconbox">
                <i class="fas fa-mouse-pointer"></i>
              </div>
              <p>选择</p>
            </div>
            <!-- 漫游 -->
            <div class="sim-toolsbox-iconcard" @click="cursor_pointer = true">
              <div class="sim-toolsbox-iconbox">
                <i class="fas fa-hand-rock"></i>
              </div>
              <p>漫游</p>
            </div>
            <!-- 撤回 -->
            <div class="sim-toolsbox-iconcard" @click="rollBack">
              <div class="sim-toolsbox-iconbox">
                <i class="fas fa-reply"></i>
              </div>
              <p>撤回</p>
            </div>
          </div>

          <div class="sim-toolsbox-subcontent">
            <el-divider></el-divider>
          </div>
          <!-- 绘图工具栏 -->
          <div class="sim-toolsbox-subcontent">
            <!-- 点 -->
            <div class="sim-toolsbox-iconcard" @click="drawPoint">
              <div class="sim-toolsbox-iconbox">
                <i class="far fa-dot-circle"></i>
              </div>
              <p>点</p>
            </div>
            <!-- 矩形 -->
            <div class="sim-toolsbox-iconcard" @click="drawBox">
              <div class="sim-toolsbox-iconbox">
                <i class="far fa-square"></i>
              </div>
              <p>矩形</p>
            </div>
            <!-- 多边形 -->
            <div class="sim-toolsbox-iconcard" @click="drawPolygon">
              <div class="sim-toolsbox-iconbox">
                <i class="fas fa-draw-polygon"></i>
              </div>
              <p>多边形</p>
            </div>
          </div>
        </div>
      </div>
      <!-- 模型配置卡片 -->
      <!-- <div class="sim-boxcard sim-modelconfig" v-drag v-show="showModelConfig">
        <div class="sim-boxcardTitle">
          <i class="far fa-file-alt"></i>
          <p>模型配置</p>
        </div>
        <div class="sim-boxcardContent sim-modelconfigcontent">
         
          <div class="sim-modelconfig-subconfig">
            <p>模型</p>
            <div class="sim-subconfig-modelchose">
              <el-input
                v-model="chosedModelName"
                size="small"
                placeholder="模型选择"
                clearable
              ></el-input>

              <i
                class="fas fa-chevron-down"
                @click="simModelDropDown = !simModelDropDown"
              >
                <div class="sim-dropdown" v-show="simModelDropDown">
                  <div
                    class="sim-dropdown-item"
                    v-for="(item, index) in modellist"
                    :key="index"
                    v-on:click="modelChosedhand(item.name)"
                  >
                    <p>{{ item.name }}</p>
                  </div>
                </div>
              </i>
              <i
                class="fas fa-chevron-down placeholder"
                style="color: rgb(237, 239, 239)"
              ></i>
            </div>
          </div>
          
          <div
            class="sim-modelconfig-subconfig"-+
            v-for="(item, index) in dataList"
            :key="index"
          >
            <p>{{ item.name }}</p>
            <div class="sim-subconfig-modelchose">
              <el-input
                size="small"
                placeholder="输入数据"
                clearable
                v-model="item.showData"
              ></el-input>
              
              <el-dropdown @command="showInputDataDown">
                <i class="fas fa-chevron-down"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    v-for="(item1, index1) in item.data"
                    :key="index1"
                    :command="item1.index"
                    >{{ item1.name }}</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
              <i class="fas fa-folder-open"></i>
            </div>
          </div>
          
          <div class="content4">
            <div class="content4_1" v-show="false">
              <span class="el-icon-loading loading"></span>
              <span class="loadText">计算中...</span>
            </div>
            <div class="content4_2">
              <el-button size="medium"> 运行 </el-button>
              <el-button
                size="medium"
                @click="showModelConfig = !showModelConfig"
              >
                取消
              </el-button>
            </div>
          </div>
        </div>
      </div> -->
      <!-- 特征提取 -->
      <div class="sim-boxcard sim-feature-extraction" v-drag v-show="showFeatureExtrCard">
        <div class="sim-boxcardTitle">
          <div class="sim-boxcardTitle title-content">
            <i class="fas fa-info-circle"></i>
            <p>特征提取</p>
          </div>
          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="showFeatureExtrCard = !showFeatureExtrCard"></i>
          </div>
        </div>
        <div class="sim-boxcardContent sim-modelconfigcontent">
          <!-- 流域基础信息 -->
          <div class="subtitle">
            <p>流域基础信息</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>名称</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <input type="text" placeholder="" v-model="basinInfo.name" class="subInput" />
              </div>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>流域边界</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <input type="text" placeholder="MinLon,MinLat,MaxLon,MaxLat" v-model="basinInfo.boundary"
                  class="subInput" />
                <i class="fas fa-edit"></i>
              </div>
            </div>
          </div>

          <!-- 参数设置 -->
          <div class="subtitle">
            <p>参数设置</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>流域面积</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <input type="text" placeholder="" v-model="basinInfo.Area" class="subInput" />
              </div>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>出水口坐标</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <input type="text" placeholder="Lon, Lat" v-model="basinInfo.OutletLonLat" class="subInput" />
              </div>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>数据类型</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <p>{{ basinInfo.filetype }}</p>
                <el-dropdown @command="basinFileTypeChose">
                  <i class="el-icon-arrow-down"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in basinFileType" :key="index" :command="index">{{ item
                    }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>河网阈值</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <input type="text" placeholder="" v-model="basinInfo.riverThreshold" class="subInput" />
              </div>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>流域合并阈值</p>
            <div class="sim-subconfig-featureExtraction">
              <div class="sim-boxcard-input">
                <input type="text" placeholder="" v-model="basinInfo.subbasinThreshold" class="subInput" />
              </div>
            </div>
          </div>
          <!-- 按钮组 -->
          <div class="content4">
            <div class="content4_1" v-show="showTimnWaiter">
              <span class="el-icon-loading loading"></span>
              <span class="loadText">计算中...</span>
            </div>
            <div class="content4_2">
              <el-button size="medium" @click="featureExtraction">
                特征提取
              </el-button>
              <el-button size="medium" :disabled="saveFeatureExtractionDataTag"
                @click="saveFeatureExtractionData">保存结果</el-button>
            </div>
          </div>
        </div>
      </div>

      <!-- 模型配置卡片 -->
      <div class="sim-boxcard sim-modelconfig" v-drag v-show="showModelConfig">
        <div class="sim-boxcardTitle">
          <div class="sim-boxcardTitle title-content">
            <i class="far fa-file-alt"></i>
            <p>模型配置</p>
          </div>
          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="showModelConfig = !showModelConfig"></i>
          </div>
        </div>
        <div class="sim-boxcardContent sim-modelconfigcontent">
          <!-- <div class="subtitle">
            <p>基础设置</p>
          </div> -->

          <!-- 流域选择  -->
          <div class="sim-modelconfig-subconfig">
            <p>预报流域</p>
            <div class="sim-subconfig-modelchose">
              <div class="sim-boxcard-input">
                <p>{{ chosedBasinName }}</p>
                <el-dropdown @command="basinChose">
                  <i class="el-icon-arrow-down"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in simulationReaultList.basinData
                      .data" :key="index" :command="index">{{ item.name }}</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div>
          <!-- 模型选择 -->
          <!-- <div class="sim-modelconfig-subconfig">
            <p>预报模型</p>
            <div class="sim-subconfig-modelchose">
              <div class="sim-boxcard-input">
                <p>{{ chosedModelName }}</p>
                <el-dropdown @command="modelChosedhand">
                  <i class="el-icon-arrow-down"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(item, index) in modellist"
                      :key="index"
                      :command="index"
                      >{{ item.name }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div> -->
          <!-- 预报时间设置 -->
          <!-- <div class="subtitle">
            <p>预报时间设置</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>模拟开始时间</p>
            <div class="sim-subconfig-modelchose">
              <el-date-picker
                v-model="startTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>作业预报时间</p>
            <div class="sim-subconfig-modelchose">
              <el-date-picker
                v-model="endTime"
                type="date"
                placeholder="选择日期"
                format="yyyy 年 MM 月 dd 日"
              >
              </el-date-picker>
            </div>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>时间步长</p>
            <div class="sim-subconfig-modelchose">
              <el-input placeholder="请输入内容" clearable v-model="timeStep">
              </el-input>
            </div>
          </div> -->
          <!-- 预报参数设置 -->
          <!-- <div class="subtitle">
            <p>预报参数选择</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <p>参数方案</p>
            <div class="sim-subconfig-modelchose">
              <div class="sim-boxcard-input">
                <p>{{ chosedParam }}</p>
                <el-dropdown @command="paramChose">
                  <i class="el-icon-arrow-down"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="(item, index) in modelParamsList"
                      :key="index"
                      :command="index"
                      >{{ item }}</el-dropdown-item
                    >
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </div>
          </div> -->
          <!-- 按钮组 -->
          <!-- <div class="content4">
            <div class="content4_1" v-show="simulationStartTag">
              <span class="el-icon-loading loading"></span>
              <span class="loadText">计算中...</span>
            </div>
            <div class="content4_2">
              <el-button size="medium" @click="startSimulation">
                模拟预报
              </el-button>
              <el-button size="medium" :disabled="showSimulationTag">
                预报结果
              </el-button>
            </div>
          </div> -->
        </div>
      </div>

      <!-- 模拟结果 -->
      <div id="SimulationResultCard" class="sim-boxcard sim-result">
        <div class="sim-boxcardTitle">
          <div class="sim-boxcardTitle title-content">
            <i class="fas fa-poll"></i>
            <p>模拟结果</p>
          </div>
          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="showSimulationResult()"></i>
          </div>
        </div>
        <div class="sim-boxcardContent sim-modelconfigcontent">
          <!-- 流域基础数据 -->
          <div class="subtitle" @click="showBasinDataList = !showBasinDataList">
            <i class="fas fa-plus-circle" v-show="!showBasinDataList"></i>
            <i class="fas fa-minus-circle" v-show="showBasinDataList"></i>
            <p>流域数据</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <div class="resultItem" v-for="(item, index) in basinData" :key="index" v-show="showBasinDataList">
              <el-switch v-model="item.visible" :inactive-text="index + 1 + '. ' + item.name" inactive-color="#DCDFE6"
                active-color="rgb(76, 118, 199)" @change="showResultBasinData(index)">
              </el-switch>
            </div>
          </div>
          <!-- 水系站点数据 -->
          <div class="subtitle" @click="showRiverStationData = !showRiverStationData">
            <i class="fas fa-plus-circle" v-show="!showRiverStationData"></i>
            <i class="fas fa-minus-circle" v-show="showRiverStationData"></i>
            <p>水系站点数据</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <div class="resultItem" v-for="(item, index) in riverMeteStationData" :key="index"
              v-show="showRiverStationData">
              <el-switch v-model="item.visible" :inactive-text="index + 1 + '. ' + item.name" inactive-color="#DCDFE6"
                active-color="rgb(76, 118, 199)" @change="showRiverResultStationData(item)">
              </el-switch>
            </div>
          </div>
          <!-- 集合预报数据 -->
          <div class="subtitle" @click="showEnsembleForecast = !showEnsembleForecast">
            <i class="fas fa-plus-circle" v-show="!showEnsembleForecast"></i>
            <i class="fas fa-minus-circle" v-show="showEnsembleForecast"></i>
            <p>集合预报数据</p>
          </div>
          <div class="sim-modelconfig-subconfig">
            <div class="resultItem" v-for="(item, index) in ensembleForecastResult" :key="index"
              v-show="showEnsembleForecast">
              <el-switch v-model="item.visible" :inactive-text="index + 1 + '. ' + item.name" inactive-color="#DCDFE6"
                active-color="rgb(76, 118, 199)" @change="showRainFallResult">
              </el-switch>
            </div>
          </div>
        </div>
      </div>
      <!-- 图表 -->
      <div id="chart-container" class="chart-container" v-show="showChart">
        <div class="iconbox" @click="showChart = !showChart">
          <i class="far fa-times-circle"></i>
        </div>
        <div id="chartbox" style="width: 800px; height: 360px; z-index: 10"></div>
      </div>
      <!-- 属性列表卡片 -->
      <div class="attribute-box" id="attributebox" v-show="showAttribute">
        <div class="attribute-item" v-for="(item, index) in featureAttribute" :key="index">
          <span>{{ item.name + ":" }}</span>

          <p>{{ item.value }}</p>
        </div>
      </div>
      <!-- 初始化状态 -->
      <div id="InitStausCard" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <i class="fas fa-water"></i>
            <p>初始化状态</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('InitStausCard')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="InitStauscontainer" v-loading.lock="ISLoader" element-loading-text="模拟中...">
          <el-form ref="form" :model="InitStausForm" label-width="120px">
            <el-form-item label="同化模式" class="HyPPFormMode">
              <el-switch v-model="InitStausForm.mode" active-text="实时模式" inactive-text="历史模式" active-color="#13ce66"
                inactive-color="#409eff">
              </el-switch>
            </el-form-item>


            <el-form-item label="模拟流域">
              <el-input v-model="InitStausForm.riverbasin"></el-input>
            </el-form-item>
            <el-form-item label="出水口">
              <el-input v-model="InitStausForm.outLetName" :disabled="true">
              </el-input><i class="el-icon-map-location" @click="FS_PickOutlet" style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "></i>
            </el-form-item>

            <el-form-item label="时间步长">
              <el-input v-model="InitStausForm.step"></el-input>
            </el-form-item>
            <el-form-item label="预热开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="InitStausForm.warmupTime"
                value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="起报时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="InitStausForm.startTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="InitStausForm.endTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="同化方法">
              <el-select placeholder="请选择同化方法" v-model="InitStausForm.daModel">
                <el-option v-for="item in InitStausForm.daModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流域产流模型">
              <el-select v-model="InitStausForm.model1" placeholder="请选择水文模型">
                <el-option v-for="item in InitStausForm.roffModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="河道汇流模型">
              <el-select v-model="InitStausForm.model2" placeholder="请选择水文模型">
                <el-option v-for="item in InitStausForm.routModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <!-- <div v-show="InitStausForm.disModel == 'None'">
              <el-form-item label="水动力模型">
                <el-select
                  placeholder="HECSRAS"
                  v-model="InitStausForm.disModel"
                >
                  <el-option
                    v-for="item in InitStausForm.disModels"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="河道汇流模型">
                <el-select
                  v-model="InitStausForm.model2"
                  placeholder="请选择汇流模型"
                >
                  <el-option
                    v-for="item in InitStausForm.routModels"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div> -->
            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="InitStaus()">开始</el-button>
              <!-- <el-button @click="FSSimulation()">模拟结果</el-button> -->
              <!-- <el-button @click="ParamRec">参数推荐</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 水文前处理 -->
      <div id="HydroProProcessCard" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <i class="fas fa-water"></i>
            <p>水文前处理</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('HydroProProcessCard')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="FScontainer" v-loading.lock="HydroProProcessForm.HPPLoader"
          element-loading-text="模拟中...">
          <el-form ref="form" :model="HydroProProcessForm" label-width="90px">
            
          

            <el-form-item label="模拟流域">
              <el-input v-model="HydroProProcessForm.riverbasin"></el-input>
            </el-form-item>
            <el-form-item label="出水口">
              <el-input v-model="HydroProProcessForm.outLetName" :disabled="true">
              </el-input><i class="el-icon-map-location" @click="FS_PickOutlet" style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "></i>
            </el-form-item>
 <el-form-item label="前处理模型">
              <el-select v-model="HydroProProcessForm.mode" placeholder="请选择前处理模型">
                <el-option v-for="item in HydroProProcessForm.modes" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="HydroProProcessForm.startTime"
                value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="HydroProProcessForm.endTime"
                value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="预见期">

              <el-input v-model="HydroProProcessForm.leadTime"></el-input>
            </el-form-item>
            <el-form-item label="时间步长">
              <el-input v-model="HydroProProcessForm.step"></el-input>
            </el-form-item>

            <el-form-item label="前处理模型">
              <el-select v-model="HydroProProcessForm.model1" placeholder="请选择前处理模型">
                <el-option v-for="item in HydroProProcessForm.ProProcessModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="HydroProProcessM('process')">开始处理</el-button>
              <el-button type="primary" @click="HydroProProcessM('show')">计算结果</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 流域模拟 -->
      <div id="FlowSimconfigCard" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <i class="fas fa-water"></i>
            <p>流域模拟</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('FlowSimconfigCard')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="FScontainer" v-loading.lock="CFLoader" element-loading-text="模拟中...">
          <el-form ref="form" :model="FSForm" label-width="120px">
            <el-form-item label="模拟流域">
              <el-input v-model="FSForm.riverbasin"></el-input>
            </el-form-item>
            <!-- <el-form-item label="模拟参数">
              <el-select
                v-model="FSForm.parameter"
                placeholder="请选择率定模型"
              >
                <el-option
                  label="Parameter_xaj4"
                  value="Parameter_xaj4"
                ></el-option>
                <el-option
                  label="Parameter_xaj3"
                  value="Parameter_xaj3"
                ></el-option>
                <el-option
                  label="Parameter_xaj1"
                  value="Parameter_xaj1"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="出水口">
              <el-input v-model="FSForm.outLetName" :disabled="true"> </el-input><i class="el-icon-map-location"
                @click="FS_PickOutlet" style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "></i>
            </el-form-item>

            <el-form-item label="预热开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="FSForm.startTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="模拟开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="FSForm.warmupTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="FSForm.endTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="时间步长">
              <el-input v-model="FSForm.step"></el-input>
            </el-form-item>
            <!-- <el-form-item label="水动力模型">
              <el-select v-model="FSForm.disModel" placeholder="请选择率定模型">
                <el-option
                  v-for="item in FSForm.disModels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item label="子流域产流模型">
              <el-select v-model="FSForm.model1" placeholder="请选择率定模型">
                <el-option v-for="item in FSForm.roffModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="河道汇流模型">
              <el-select v-model="FSForm.model2" placeholder="请选择汇流模型">
                <el-option v-for="item in FSForm.routModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="FSSimulation(false)">开始模拟</el-button>
              <el-button @click="FSSimulation(true)">模拟结果</el-button>
              <!-- <el-button @click="ParamRec">参数推荐</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 参数推荐 -->
      <ParamRec :msg="ParamRecSent" @paramRecInfo="getParamRecInfo" v-if="ShowParamRec"></ParamRec>
      <!-- 敏感性-参数率定分析 -->
      <div class="sim-boxcard sensitive_analyse" v-show="showSA">
        <div class="sim-boxcardTitle">
          <div class="sim-boxcardTitle title-content">
            <i class="fas fa-chart-area"></i>
            <p>敏感性分析</p>
          </div>
          <div class="sim-boxcardTitle title-exit" @click="showSA = !showSA">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="sa_content">
          <div class="sa_stepbar" style="cursor: pointer">
            <el-steps :active="activeStepID" finish-status="success" simple class="steps">
              <el-step title="问题描述" @click.native="hand_steps(0)"></el-step>
              <el-step title="参数采样" @click.native="hand_steps(1)"></el-step>
              <el-step title="敏感性分析" @click.native="hand_steps(2)"></el-step>
              <!-- <el-step title="参数率定" @click.native="hand_steps(3)"></el-step> -->
            </el-steps>
          </div>

          <div class="sa_contentbox">
            <component :is="componentID"></component>
          </div>
        </div>
      </div>
      <div class="CAResultCard" v-show="showCaResult">
        <!-- <div class="CAResultCard" v-show="true"> -->
        <div class="title">
          <span>参数率定结果</span>
          <i class="far fa-times-circle" @click="showCaResult = !showCaResult"></i>
        </div>

        <!-- <el-image :src="imageSrc"></el-image> -->
        <el-table :data="CA_result" height="260" style="width: 100%">
          <el-table-column prop="name" label="参数" width="180">
          </el-table-column>
          <el-table-column prop="value" label="值"> </el-table-column>
        </el-table>
      </div>
      <div id="CAconfigCard" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <i class="fas fa-chart-pie"></i>
            <p>参数率定</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('CAconfigCard')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="CAcontainer" v-loading.lock="calibrationLoader" element-loading-text="率定中...">
          <el-form ref="form" :model="CAForm" label-width="120px">
            <el-form-item label="率定流域">
              <el-input v-model="CAForm.riverbasin"></el-input>
            </el-form-item>
            <el-form-item label="出水口">
              <el-input v-model="CAForm.outLetName" :disabled="true"> </el-input><i class="el-icon-map-location"
                @click="CA_PickOutlet" style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "></i>
            </el-form-item>

            <el-form-item label="开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="CAForm.startTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="预热期">
              <el-date-picker type="date" placeholder="选择日期" v-model="CAForm.warmupTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="CAForm.endTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="时间步长">
              <el-input v-model="CAForm.step"></el-input>
            </el-form-item>
            <el-form-item label="率定方法">
              <el-select v-model="CAForm.method1" placeholder="请选择率定方法">
                <el-option label="NSCE" value="NSCE"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="是否区间流域">
              <el-switch v-model="CAForm.Interval"></el-switch>
              <span>（可选）</span>
            </el-form-item> -->
            <!-- <el-form-item label="水动力模型">
              <el-select v-model="CAForm.disModel" placeholder="请选择率定模型">
                <el-option
                  v-for="item in CAForm.disModels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
            <div v-show="CAForm.disModel == 'None'">
              <el-form-item label="子流域产流模型">
                <el-select v-model="CAForm.model1" placeholder="请选择产流模型">
                  <el-option v-for="item in CAForm.roffModels" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="河道汇流模型">
                <el-select v-model="CAForm.model2" placeholder="请选择汇流模型">
                  <el-option v-for="item in CAForm.routModels" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="河道演算模型">
                <el-select v-model="CAForm.model3" placeholder="请选择演算模型">
                  <el-option
                    v-for="item in CAForm.rivers"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item> -->
            </div>
            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-upload class="upload-demo" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="3"
                :show-file-list="false">
                <el-button type="info">历史数据</el-button>
              </el-upload>
              <el-button type="primary" @click="calibration">开始率定</el-button>
              <el-button type="info" @click="CA_resultAnalysis">径流过程线</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 水文集合预报 -->
      <div id="EnsembleForecast" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <!-- <i class="fa-solid fa-chart-column"></i> -->
            <font-awesome-icon class="font-icon" style="margin-right: 5px" icon="cloud-showers-water" />
            <p>水文集合预报</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('EnsembleForecast')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="EnsembleForecastContainer" v-loading.lock="EnsembleForecastLoader"
          element-loading-text="模型处理中...">
          <el-form ref="form" :model="EnsembleForm" label-width="110px">
            <el-form-item label="预报模式" class="HyPPFormMode">
              <el-switch v-model="EnsembleForm.mode" active-text="实时模式" inactive-text="历史模式" active-color="#13ce66"
                inactive-color="#409eff">
              </el-switch>
            </el-form-item>

            <el-form-item label="预报流域">
              <el-input v-model="EnsembleForm.riverbasin"></el-input>
            </el-form-item>

            <el-form-item label="出水口">
              <el-input v-model="EnsembleForm.outLetName" :disabled="true"> </el-input><i class="el-icon-map-location"
                @click="EF_PickOutlet" style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "></i>
            </el-form-item>

            <!-- <el-form-item label="出水口">
              <el-input v-model="EnsembleForm.outLetName"></el-input>
            </el-form-item> -->
            <el-form-item label="预见期">
              <el-input v-model="EnsembleForm.leadTime"></el-input>
            </el-form-item>
            <el-form-item label="步长">
              <el-input v-model="EnsembleForm.timeStep"></el-input>
            </el-form-item>
            <el-form-item label="预热开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="EnsembleForm.startTime" format="yyyy 年 MM 月 dd 日"
                value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="起报时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="EnsembleForm.warmTime" format="yyyy 年 MM 月 dd 日"
                value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="EnsembleForm.endTime" format="yyyy 年 MM 月 dd 日"
                value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="水动力模型">
              <el-select placeholder="请选择率定模型">
                <el-option label="None" value="None"></el-option>
              </el-select>
            </el-form-item> -->

            <el-form-item label="流域产流模型">
              <el-select v-model="EnsembleForm.roffModel" placeholder="请选择产流模型">
                <el-option v-for="item in EnsembleForm.roffModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="河道汇流模型">
              <el-select v-model="EnsembleForm.routModel" placeholder="请选择汇流模型">
                <el-option v-for="item in EnsembleForm.routModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="EnsembleForecast('simulate')">开始预报</el-button>
              <el-button @click="EnsembleForecast('show')">预报结果</el-button>
              <!-- <el-button @click="showEnsembleForecastResult('runoffreal')">实时结果</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 实时水文集合预报 -->
      <div id="realTimeEnsembleForecast" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <font-awesome-icon class="font-icon" style="margin-right: 5px" icon="cloud-showers-heavy" />
            <p>实时水文集合预报</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('realTimeEnsembleForecast')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="realTimeEnsembleForecastContainer" v-loading.lock="EnsembleForecastLoader"
          element-loading-text="模型处理中...">
          <el-form ref="form" :model="realTimeEnsembleForm" label-width="100px">
            <el-form-item label="预报流域">
              <el-input v-model="realTimeEnsembleForm.riverbasin"></el-input>
            </el-form-item>
            <el-form-item label="出水口">
              <el-input v-model="realTimeEnsembleForm.outLetName"></el-input>
            </el-form-item>
            <el-form-item label="预见期">
              <el-input v-model="realTimeEnsembleForm.leadTime"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="realTimeEnsembleForm.startTime"
                format="yyyy 年 MM 月 dd 日" value-format="yyyyMMddHH" style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="分布式模型">
              <el-select v-model="realTimeEnsembleForm.disModel" placeholder="请选择率定模型">
                <el-option v-for="item in realTimeEnsembleForm.disModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <div v-show="realTimeEnsembleForm.disModel == 'None'">
              <el-form-item label="产流模型">
                <el-select v-model="realTimeEnsembleForm.roffModel" placeholder="请选择率定模型">
                  <el-option v-for="item in realTimeEnsembleForm.roffModels" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="流域汇流模型">
                <el-select v-model="realTimeEnsembleForm.routModel" placeholder="请选择汇流模型">
                  <el-option v-for="item in realTimeEnsembleForm.routModels" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <div v-show="realTimeEnsembleForm.disModel != 'None'">
              <el-form-item label="实时气象">
                <el-select v-model="realTimeEnsembleForm.nearData" placeholder="请选择实时气象数据源">
                  <el-option v-for="item in realTimeEnsembleForm.nearDataSources" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="实时预报">
                <el-select v-model="realTimeEnsembleForm.fcstData" placeholder="请选择实时预报数据源">
                  <el-option v-for="item in realTimeEnsembleForm.fcstDataSources" :key="item.value" :label="item.label"
                    :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </div>

            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="RealTimeEnsembleForecast">开始处理</el-button>
              <el-button @click="showRealTimeEnsembleForecastResult">预报结果</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- 水文后处理 -->
      <div id="HydroPostProConfig" class="configCard-slider HydroPostProConfig">
        <div class="title">
          <div class="titleIcon">
            <i class="fa-solid fa-chart-column"></i>
            <p>水文后处理</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('HydroPostProConfig')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="HyPPcontainer" v-loading.lock="HyPPLoader" element-loading-text="水文后处理中...">
          <el-form ref="form" :model="HyPPForm" label-width="120px">
            <el-form-item label="处理模式" class="HyPPFormMode">
              <el-switch v-model="HyPPForm.mode" active-text="实时模式" inactive-text="历史模式" active-color="#13ce66"
                inactive-color="#409eff" @change="HyPPmodeChange">
              </el-switch>
            </el-form-item>
            <el-form-item label="处理流域">
              <el-input v-model="HyPPForm.riverbasin"></el-input>
            </el-form-item>
            <el-form-item label="出水口">
              <el-input v-model="HyPPForm.outLetName" :disabled="true">
              </el-input><i class="el-icon-map-location" @click="HyPP_PickOutlet" style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "></i>
            </el-form-item>

            <!-- <el-form-item label="开始时间">
              <el-date-picker type="year" placeholder="选择日期" v-model="HyPPForm.startTime" value-format="yyyy"
                style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker type="year" placeholder="选择日期" v-model="HyPPForm.endTime" value-format="yyyy"
                style="width: 100%"></el-date-picker>
            </el-form-item>
             -->
            <el-form-item label="时间步长">
              <el-input v-model="HyPPForm.step"></el-input>
            </el-form-item>
            <el-form-item label="预见期">
              <el-input v-model="HyPPForm.leadtime"></el-input>
            </el-form-item>
            <el-form-item label="起报时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="HyPPForm.startForcast" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker type="date" placeholder="选择日期" v-model="HyPPForm.forcastTime" value-format="yyyyMMddHH"
                style="width: 100%"></el-date-picker>
            </el-form-item>

            <el-form-item label="后处理模型">
              <el-select v-model="HyPPForm.postProModel" placeholder="请选择后处理模型">
                <el-option v-for="item in HyPPForm.postProModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="流域产流模型">
              <el-select v-model="HyPPForm.roffModel" placeholder="请选择产流模型">
                <el-option v-for="item in HyPPForm.roffModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="河道汇流模型">
              <el-select v-model="HyPPForm.routModel" placeholder="请选择汇流模型">
                <el-option v-for="item in HyPPForm.routModels" :key="item.value" :label="item.label"
                  :value="item.value"></el-option>
              </el-select>
            </el-form-item>




            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="HydroPostProcessing(false)">开始处理</el-button>
              <el-button @click="HydroPostProcessing(true)">处理结果</el-button>
              <!-- <el-button @click="showHyPPResult(true)">原始预报处理</el-button> -->
            </el-form-item>
          </el-form>
        </div>
      </div>
      <!-- 降雨预报评价 -->
      <div id="verification" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <font-awesome-icon class="font-icon" style="margin-right: 5px" icon="fa-solid fa-circle-check" />

            <p>降雨预报评价</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('realTimeEnsembleForecast')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container" id="realTimeEnsembleForecastContainer" v-loading.lock="verificationLoader"
          element-loading-text="模型处理中...">
          <el-form ref="verform" :model="verForm" label-width="120px" class="verification">
            <el-form-item label="指标类型">
              <el-select v-model="verForm.type" placeholder="指标类型">
                <el-option label="确定性指标" value="deterministic"></el-option>
                <el-option label="概率性指标" value="probabilistic"></el-option>
                <el-option label="分类指标" value="categorical"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="确定性指标" v-if="verForm.type == 'deterministic'">
              <el-select v-model="verForm.deterministic" placeholder="确定性指标">
                <el-option label="RB" value="RB"></el-option>
                <el-option label="Bias" value="Bias"></el-option>
                <el-option label="PCC" value="PCC"></el-option>
                <el-option label="SCC" value="SCC"></el-option>
                <el-option label="RMSE" value="RMSE"></el-option>
                <el-option label="nRMSE" value="nRMSE"></el-option>
                <el-option label="MAE" value="MAE"></el-option>
                <el-option label="MSE" value="MSE"></el-option>
                <el-option label="NSE" value="NSE"></el-option>
                <el-option label="KGE" value="KGE"></el-option>
                <el-option label="NPE" value="NPE"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="概率性指标" v-else-if="verForm.type == 'probabilistic'">
              <el-select v-model="verForm.probabilistic" placeholder="概率性指标">
                <el-option label="CRPS" value="CRPS"></el-option>
                <el-option label="CRPSS" value="CRPSS"></el-option>
                <el-option label="alpha_index" value="alpha_index"></el-option>
                <el-option label="IQR" value="IQR"></el-option>
              </el-select>
            </el-form-item>
            <div v-else>
              <el-form-item label="分类指标">
                <el-select v-model="verForm.categorical" placeholder="分类指标">
                  <el-option label="BS" value="BS"></el-option>
                  <el-option label="BSS" value="BSS"></el-option>
                  <el-option label="ROCSS" value="ROCSS"></el-option>
                  <el-option label="RPS" value="RPS"></el-option>
                  <el-option label="RPSS" value="RPSS"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="阈值" v-if="
                verForm.categorical == 'BS' ||
                verForm.categorical == 'BSS' ||
                verForm.categorical == 'ROCSS'
              ">
                <el-input v-model="verForm.threshold"></el-input>
              </el-form-item>
              <el-form-item label="百分位列表" v-else>
                <el-input v-model="verForm.percentileList"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="单网格坐标(可选)">
              <el-input placeholder="lat lon" v-model="verForm.latlon"></el-input>
            </el-form-item>
            <el-form-item size="small" label-width="0" class="btnGroup">
              <el-button type="primary" @click="verification">开始处理</el-button>
              <el-button @click="showVerificationResult('curvedLine')">变化曲线</el-button>
              <el-button @click="showVerificationResult('boxLine')">箱线图</el-button>
              <el-button @click="showVerificationResult('spatialDistribution')">空间分布图</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <div v-show="showSpatial" class="block" style="
          position: absolute;
          width: 360px;
          z-index: 11;
          left: 50%;
          bottom: 30px;
          background-color: white;
          transform: translate(-50%, 0);
          padding: 0px 20px;
          box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
          border-radius: 6px;
        ">
        <el-slider v-model="verLayerConfig.sliderValue" :step="verLayerConfig.step" :max="verLayerConfig.max" show-stops
          @change="verSliderHander">
        </el-slider>
      </div>
      <!-- <div id="HydroPostProConfig" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <i class="fa-solid fa-chart-column"></i>
            <p>水文后处理</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('HydroPostProConfig')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div
          class="container"
          id="HyPPcontainer"
          v-loading.lock="HyPPLoader"
          element-loading-text="水文后处理中..."
        >
          <el-form ref="form" :model="HyPPForm" label-width="100px">
            <el-form-item label="处理流域">
              <el-input v-model="HyPPForm.riverbasin"></el-input>
            </el-form-item>
            <el-form-item label="出水口">
              <el-input v-model="HyPPForm.outLetName" :disabled="true">
              </el-input
              ><i
                class="el-icon-map-location"
                @click="HyPP_PickOutlet"
                style="
                  position: absolute;
                  font-size: large;
                  bottom: 20%;
                  right: 5%;
                "
              ></i>
            </el-form-item>

            <el-form-item label="开始时间">
              <el-date-picker
                type="year"
                placeholder="选择日期"
                v-model="HyPPForm.startTime"
                value-format="yyyyMMdd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="结束时间">
              <el-date-picker
                type="year"
                placeholder="选择日期"
                v-model="HyPPForm.endTime"
                value-format="yyyyMMdd"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="时间步长">
              <el-input v-model="HyPPForm.step"></el-input>
            </el-form-item>
            <el-form-item label="预见期">
              <el-input v-model="HyPPForm.leadtime"></el-input>
            </el-form-item>
            <el-form-item label="预报时间">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                v-model="HyPPForm.endTime"
                value-format="yyyyMMddHH"
                style="width: 100%"
              ></el-date-picker>
            </el-form-item>

            <el-form-item label="产流模型">
              <el-select v-model="HyPPForm.model1" placeholder="请选择率定模型">
                <el-option label="XAJ" value="XAJ"></el-option>
                <el-option label="HBV-GLOBAL" value="HBV-GLOBAL"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="流域汇流模型">
              <el-select v-model="HyPPForm.model2" placeholder="请选择汇流模型">
                <el-option label="LagK" value="LagK"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item size="medium" label-width="0" class="btnGroup">
              <el-button type="primary" @click="HydroPostProcessing"
                >开始处理</el-button
              >
              <el-button @click="showHyPPResult('预测区间')"
                >预测区间</el-button
              >
              <el-button @click="showHyPPResult('超越概率')"
                >超越概率</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div> -->

      <!-- 模型库 -->
      <div id="ModelRepository" class="configCard-slider">
        <div class="title">
          <div class="titleIcon">
            <i class="fa-solid fa-cubes"></i>
            <p>模型库</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('ModelRepository', 'left')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container">
          <div class="modelItem" v-for="(model, index) in modellist" :key="index">
            <span>{{ model.name }}</span>
            <button @click="getModelConfig(model)">配置</button>
          </div>
        </div>
      </div>

      <!-- 模型配置页面 -->
      <div id="freemodelConfig" class="configCard-slider freemodelConfig">
        <div class="title">
          <div class="titleIcon">
            <i class="fa-regular fa-file-code"></i>
            <p>{{ modelConfig.name }}</p>
          </div>
          <div class="exitIcon" @click="exitConfigCard('freemodelConfig', 'right')">
            <i class="far fa-times-circle"></i>
          </div>
        </div>
        <div class="container">
          <div class="divider">
            <span>输 入</span>
          </div>
          <div class="modelConfigItem" v-for="(inputItem, index) in modelConfig.InParameters" :key="index">
            <div class="item-info">
              <div class="item-name">
                <span>*</span>
                <span>{{ inputItem.name }}</span>
              </div>
              <span class="item-description">{{ inputItem.description }}</span>
            </div>
            <div class="item-content">
              <el-input :disabled="inputItem.type == 'file' ? true : false" v-model="inputItem.value"></el-input>
              <el-upload :action="inputItem.url" :show-file-list="false" :on-success="modelDataUploadSuccess"
                v-if="inputItem.type == 'file' ? true : false">
                <i class="fa-solid fa-cloud-arrow-up" @click="handModelInputIndex(index)"></i>
              </el-upload>
              <div v-else style="width: 35px"></div>
            </div>
          </div>
          <div class="divider">
            <span>输 出</span>
          </div>
          <div class="modelConfigItem" v-for="(outfiles, indexOut) in modelConfig.OutFiles" :key="indexOut + '_'">
            <div class="item-info">
              <div class="item-name">
                <span>*</span>
                <span>{{ outfiles.name }}</span>
              </div>
            </div>
            <div class="item-content">
              <el-input :disabled="true" v-model="outfiles.description"></el-input>
              <i class="fa-solid fa-download"></i>
            </div>
          </div>
          <div class="Operation">
            <el-button type="primary" style="height: 35px" v-for="(operator, index) in modelConfig.Operation"
              :key="index" @click="modelOperation(operator.url)">{{ operator.name }}</el-button>
          </div>
        </div>
      </div>
      <!-- 降水预报 -->
      <div class="sim-rainfallForcast sim-boxcard" v-drag v-show="showRainfallForcast">
        <div class="sim-boxcardTitle">
          <div class="sim-boxcardTitle title-content">
            <i class="fab fa-cloudversify"></i>
            <p>降水集合预报</p>
          </div>
          <div class="sim-boxcardTitle title-exit">
            <i class="far fa-times-circle" @click="showRainfallForcast = !showRainfallForcast"></i>
          </div>
        </div>

        <div class="sim-rainfallconfigcontent sim-boxcardContent">
          <div class="uploadFileItem">
            <span class="title">网格数据</span>
            <div class="itemContainer">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                :before-upload="beforeBasinGridUpload">
                <input type="text" disabled="disabled" autocomplete="off" style="margin-right: 5px; width: 100%"
                  v-model="rainFallConfigbasingrid" />
                <i class="el-icon-folder-opened" style="font-size: 20px; width: 10%"></i>
              </el-upload>
            </div>
          </div>
          <div class="uploadFileItem">
            <span class="title">原始数据</span>
            <div class="itemContainer">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                :before-upload="beforeRawfcstUpload">
                <input type="text" disabled="disabled" autocomplete="off"
                  style="margin-right: 5px; width: 100%; height: 20px" v-model="rainFallConfigRawfcst" />
                <i class="el-icon-folder-opened" style="font-size: 20px; width: 10%"></i>
              </el-upload>
            </div>
          </div>
          <div class="uploadFileItem">
            <span class="title">观测数据</span>
            <div class="itemContainer">
              <el-upload action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
                :before-upload="beforeObsUpload">
                <input type="text" disabled="disabled" autocomplete="off"
                  style="margin-right: 5px; width: 100%; height: 20px" v-model="rainFallConfigObs" />
                <i class="el-icon-folder-opened" style="font-size: 20px; width: 10%"></i>
              </el-upload>
            </div>
          </div>
          <div class="uploadFileItem">
            <span class="title">预见期</span>
            <div style="width: 245px; height: 20px">
              <input type="text" autocomplete="off" style="width: 85%; height: 20px; border-color: white"
                v-model="rainFallLead" />
            </div>
          </div>
          <div class="uploadFileItem" style="margin-top: 15px">
            <span class="title">开始时间</span>
            <div class="rainfallDatePicker">
              <el-date-picker v-model="rainfallStartTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </div>
          </div>
          <div class="uploadFileItem">
            <span class="title">结束时间</span>
            <div class="rainfallDatePicker">
              <el-date-picker v-model="rainfallEndTime" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日">
              </el-date-picker>
            </div>
          </div>
          <div class="rainfallBtnGroup">
            <div class="loading" v-show="rainFallSimTag">
              <i class="el-icon-loading" style="font-size: 25px; margin-right: 5px"></i>
              <span style="font-size: 15px; margin-right: 5px">计算中...</span>
            </div>
            <el-button type="primary" size="medium" @click="startRainFallSim">模拟预报</el-button>
            <el-button type="primary" size="medium" @click="showRainFallResult">预报结果</el-button>
          </div>
        </div>
      </div>
      <div class="rainfallforcast-color" v-show="showRainfall">
        <div class="color-bar">
          <div class="color">
            <div class="color-item" style="background-color: #ffffff"></div>
            <div class="color-item" style="background-color: #9cf790"></div>
            <div class="color-item" style="background-color: #37a600"></div>
            <div class="color-item" style="background-color: #67b4f8"></div>
            <div class="color-item" style="background-color: #0002fe"></div>
            <div class="color-item" style="background-color: #fa03f0"></div>
            <div class="color-item" style="background-color: #710100"></div>
          </div>
          <div class="label">
            <div class="color-item" style="text-align: right">0</div>
            <div class="color-item" style="text-align: right">5</div>
            <div class="color-item" style="text-align: right">10</div>
            <div class="color-item" style="text-align: right">15</div>
            <div class="color-item" style="text-align: right">20</div>
            <div class="color-item" style="text-align: right">25</div>
            <div class="color-item" style="text-align: right"></div>
          </div>
        </div>
      </div>
      <div class="rainfallforcast-playDiv" v-show="showRainfall">
        <div class="timeName">
          {{ date[0] }}年{{ date[1] }}月{{ date[2] }}日 第{{ leadtime }}天
        </div>

        <div class="block">
          <el-slider v-model="leadtime" :step="1" :max="6" :show-tooltip="false" @input="rainfall()"></el-slider>
        </div>
        <i class="fa-solid fa-angles-left" @click="leadtime = leadtime - 1"></i>
        <i class="fa-regular fa-circle-pause" @click="rainfall_clearInterval" v-if="showPlay"></i>
        <i class="fa-regular fa-circle-play" @click="rainfall_play" v-if="!showPlay"></i>
        <i class="fa-solid fa-angles-right" @click="leadtime = leadtime + 1"></i>
      </div>
      <div class="loading" v-if="loadingtag" v-loading="loadingtag" element-loading-text="流域提取中..."
        element-loading-background="rgba(255, 255, 255, 0.8)"></div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import * as echarts from "echarts";
import "ol/ol.css";

import { Feature, Map, View } from "ol";
import {
  Heatmap,
  Vector as VectorLayer,
  Tile as TileLayer,
  Image,
} from "ol/layer";
import OverviewMap from "ol/control/OverviewMap";
import proj, { get } from "ol/proj";
import Draw, { createBox, createRegularPolygon } from "ol/interaction/Draw";
import { Snap, DoubleClickZoom, Extent } from "ol/interaction";
import { boundingExtent } from "ol/extent";
import {
  TileWMS as TileWMSSource,
  Vector as VectorSource,
  XYZ,
  TileImage,
  ImageWMS,
  OSM,
  ImageStatic as ImageStaticSource,
} from "ol/source";
import GeoJSON from "ol/format/GeoJSON";
import loadingstrategy from "ol/loadingstrategy";
import tilegrid from "ol/tilegrid";
import { format } from "ol/coordinate";
import "../assets/css/simulation.css";
import { Circle as CircleStyle, Fill, Stroke, Style } from "ol/style";
import drag from "../assets/js/drag.js";
import Projection from "ol/proj/Projection";
import swal from "sweetalert";
// import Circle from "ol/geom/Circle";
// import Point from "ol/geom/Point";
import { Circle, Geometry, Point, Polygon } from "ol/geom";
import { extend } from "ol/array";
import SAProblemDdfin from "./SAProblemDdfin";
import SAExpDesign from "./SAExpDesign";
import SAAnalyze from "./SAAnalyze";
import SAOpt from "./SAOpt";
import ParamRec from "./HydrologySimulation/ParamRec.vue";
// import { config } from 'vue/types/umd';
import { config } from "../plugins/config.js";
import { Promise, promised } from "q";
export default {
  props: ["lanage"],
  data() {
    return {
      initInformation: {}, //读取模型数据信息
      showImportModel: false,
      ip: config.ip,
      importModelForm: {
        basin: "",
        station: "",
        lon: "",
        lat: "",
        importHIS: "",
        selectedimportModel: "",
        selectedimportHIS: "",
        dataName: "",
        reforecastdata1: "",
        reforecastdata: [
          {
            value: "GEFS",

            label: "GEFS",
          },
        ],
        ST_FORCE_HIS: [
          {
            value: "CMADS",
            label: "CMADS",
          },
        ],
        importModelOptions: [
          {
            value: "SWATPlus",
            label: "SWATPlus",
          },
        ],
      },
      modelsInfo: {
        disModels: [],
        roffModels: [],
        routModels: [],
        riverModels: [],
        forceNear: [],
        forceFcst: [],
      },
      // lanage: "CN",
      menu_txt_cur: {},
      menu_txt: {
        CN: {
          FE: "特征提取",
          // WS: "数据同化",
          WS: "流域模拟",
          PC: "参数率定",
          WF: "水文集合预报",
          PP: "水文后处理",
          HF: "实时集合预报",
          HR: "水文后处理",
          SA: "敏感性分析",
          SR: "模拟结果",
          ML: "模型库",
          DP: "数据处理",
          TL: "工具箱",
          VE: "预报评价",
          HydroProProcess: "水文前处理",
          Initstaus: "初始化状态",
        },
        EN: {
          FE: "Feature Extraction",
          WS: "Watershed Simulation",
          PC: "Parameter Calibration",
          PP: "Post Processing",
          WF: "Ensemble Forecasting",
          HF: "Real-time Ensemble Forecasting",
          HR: "Hydrological Reprocessing",
          SA: "Sensitivity Analysis",
          SR: "Simulation Results",
          ML: "Model Library",
          DP: "Data Processing",
          TL: "Toolbox",
          VE: "Verification",
          HydroProProcess: "HydroPreProcessing",
          Initstaus: "Initial Status", //初始状态
        },
      },

      useInfo: JSON.parse(localStorage.getItem("user")),
      showMapLayers: false, //左下角背景图层卡片显示与控制
      layersData: [
        {
          id: 1,
          label: "背景图层",
          children: [
            {
              id: 1.1,
              label: "天地图矢量图层",
            },
            {
              id: 1.2,
              label: "天地图影像图层",
            },
            {
              id: 1.3,
              label: "天地图地形图层",
            },
            {
              id: 1.4,
              label: "谷歌地图",
            },
          ],
        },
        {
          id: 2,
          label: "流域图层",
          children: [
            {
              id: 2.1,
              label: "河网",
            },
            {
              id: 2.2,
              label: "流域边界",
            },
            {
              id: 2.3,
              label: "流域水系",
            },
            {
              id: 2.4,
              label: "子流域边界",
            },
            {
              id: 2.5,
              label: "子流域",
            },
            {
              id: 2.6,
              label: "王家坝流域",
            },
            {
              id: 2.7,
              label: "东辽河流域",
            },
          ],
        },
        {
          id: 3,
          label: "水文站网",
          children: [
            {
              id: 3.1,
              label: "水文",
            },
            {
              id: 3.2,
              label: "水位",
            },
            {
              id: 3.3,
              label: "气象",
            },
            {
              id: 3.4,
              label: "泥沙",
            },
          ],
        },

        {
          id: 4,
          label: "其他",
          children: [
            // {
            //   id: 3 - 1,
            //   label: "其他",
            // },
          ],
        },
      ],
      defaultExpandLayerID: [1, 2], //流域图层卡片展开设置
      defaultCheckedLayerID: [1.1], //流域图层卡片默认选择设置
      showLayerCard: false,

      showToolsBox: false, //工具箱卡片显影设置
      // 模型配置卡片
      showModelConfig: false,

      simModelDropDown: false, //模型选择下拉框显影设置

      modellist: [
        {
          name: "HBV模型",
          availably: true,
          author: "张三",
          info: {
            modelPath: "E:\\working\\HHU_NNU\\Program\\HydroModelExe\\HBV",
            programName: "ExeHBV.exe",
            modelName: "hbv",
          },
          params: ["hbv_uh_mc"],
        },
        {
          name: "新安江模型",

          availably: true,
          author: "李四",
          info: {
            modelPath: "E:\\working\\HHU_NNU\\Program\\HydroModelExe\\XAJ",
            programName: "ExeXAJ.exe",
            modelName: "xaj",
          },
          params: ["xaj_uh_mc"],
        },
        {
          name: "Creast模型",
          description:
            "CREST（Coupled Routing and Excess STorage model）由俄克拉荷马大学和美国宇航局SERVIR联合开发，是一种分布式水文模型，旨在通过单元间模拟模拟地表以及地下水通量和储水的空间和时间变化。",
          modelOpenness: "Public",
          img: "ModelImg/CREST.png",
          registerDate: "2022年11月16日",
        },
      ],
      modelConfig: {
        name: "测试模型",
        InParameters: [
          {
            default: "",
            description: "流域DEM数据",
            name: "DEM",
            option: "false",
            url: config.ip + "CREST/uploadZip/Rains",
            value: "",
            type: "file",
          },
          {
            default: "",
            description: "流域汇流累计量数据",
            name: "FAC",
            option: "false",
            url: "",
            value: "",
            type: "file",
          },
          {
            default: "",
            description: "流域流向数据",
            name: "FDR",
            option: "false",
            url: "",
            value: "",
            type: "file",
          },
          {
            default: "",
            description: "流域河网数据",
            name: "Stream",
            option: "false",
            url: "",
            value: "",
            type: "file",
          },
          {
            default: "",
            description: "出水口经度",
            name: "OutletLon",
            option: "false",
            url: "",
            value: "",
            type: "txt",
          },
          {
            default: "",
            description: "时间尺度",
            name: "TimeMark",
            option: "false",
            url: "",
            value: "",
            type: "radio",
          },
        ],
        OutFiles: [
          {
            default: "",
            description: "模拟结果",
            name: "Result",
            option: "false",
            url: "",
            type: "file",
          },
        ],
        Operation: [
          {
            default: "",
            description: "模拟结果",
            name: "调用",
            option: "false",
            url: "",
            type: "button",
          },
          {
            default: "",
            description: "参数率定",
            name: "率定",
            option: "false",
            url: "",
            type: "button",
          },
        ],
      },
      modelInputIndex: -1,
      dataList: [
        {
          name: "流域边界数据",
          data: [
            {
              index: "1-1",
              name: "basinBorder_Huaihe",
              type: "shapefile",
              description: "淮河流域边界数据",
              specificInfo: {
                outletname: "bengbu",
                outletcor: { X: 117.384, Y: 32.962 },
              },
              path: "E:\\working\\hohai_university_cor\\Init\\huaiheBasin",
            },
            {
              index: "1-2",
              name: "basinBorder_Wangjiaba",
              type: "shapefile",
              description: "王家坝流域边界数据",
              specificInfo: {
                outletname: "Wangjiaba",
                outletcor: { X: 115.597, Y: 32.428 },
              },
              path: "E:\\working\\hohai_university_cor\\DivideSubBasinoutput\\Wangjiaba",
            },
          ],
          showData: "",
        },
        {
          name: "河网数据",
          data: [{ index: "2-1", name: "淮河流域河网" }],
          showData: "",
        },
        {
          name: "流向数据",
          data: [{ index: "3-1", name: "淮河流域流向" }],
          showData: "",
        },
      ],

      loading: true,

      map: new Map(),
      watershedIniTag: false, //流域初始化配置框显示影藏
      addOutletTag: false, //添加出水口配置框显示影藏
      outletWashedtName: "",
      outletName: "",
      outletCor: "",
      divideSubBasinTag: false,
      addOutletLoadingTag: false, //加载图标显示影藏
      addOutletbtndisableTag: false,

      basinInitialTag: false,
      basinInitialLoadingTag: false, //加载图标显示影藏
      basinInitialbtndisableTag: false,
      // 流域初始化配置卡片
      watershedMaxLonLat: "", //流域最大坐标
      watershedMinLonLat: "", //流域最小坐标
      outletLonLat: "", //出水口坐标
      checkedId: "1.1", //最后拿到的唯一选择的id值
      backLayersId: 1.1, //最后拿到的背景图层节点的id值
      lonlat: "[ 666.00, 66.00 ]",
      outlatstationlonlat: "",
      tdtMap_vecLayer: null, //天地图矢量图层
      tdtMap_terLayer: null, // 天地图地形数据
      tdtMap_imgLayer: null, //天地图影像数据
      googleMap_terLayer: null, //谷歌地形图
      // watershed_wmsLayer: null, //流域数据
      // mapClicktag: false, //鼠标点击实践控制标记
      cursor_pointer: true, //鼠标指针样式
      drawVectorLayer: null, //绘制图层
      featuresLayers: [], //要素图层，用于展示要素
      snapInteraction: null, //吸附控制
      loadStreamTag: false, //河网数据加载标记
      streamLayer: null, //河网图层
      basinBorderLayer: null, //流域边界图层
      basinstreamLayer: null, //水系图层
      subBasinLayers: [], //子流域图层
      subBasinBorderLayers: [], //子流域边界图层
      outLetLayer: new VectorLayer(), //出水口图层
      modelParamsList: [
        {
          name: "HBV模型参数-王家坝流域",
          values: {},
        },
        {
          name: "HBV模型参数-东辽河流域",
          values: {},
        },
        {
          name: "新安江模型参数-王家坝流域",
          values: {},
        },
        {
          name: "新安江模型参数-东辽河流域",
          values: {},
        },
      ], //模型参数方案

      modelParamsTest: {
        head: [
          "*CET",
          "*PCORR",
          "*CWH",
          "TT",
          "CFMAX",
          "CFR",
          "SFCF",
          "BETA",
          "FC",
          "LP",
          "PERC",
          "UZL",
          "K0",
          "K1",
          "K2",
          "*a",
          "*theta",
          "K",
          "X",
        ],
        values: [
          0.01, 1, 1, -1.533253502, 1.035154491, 0.386831624, 0.267100274,
          5.5668611, 455.307093, 0.722303839, 0.456628959, 16.16792514,
          0.461569915, 0.180116446, 0.033054261, 3, 10, 24, 0.3,
        ],
      }, //模型测试参数
      basinList: ["王家坝", "东辽河"], //流域列表

      /**特征提取系列变量*/
      activeteFeatureExtraction: false,
      basinFileType: ["tif", "shap", "asc"],
      basinInfo: {
        id: "null",
        name: "dongliaohe",
        boundary:
          "123.607916666666,42.6129166666666,125.587916666666,44.1479166666665",
        Area: 0,
        OutletLonLat: "123.700199,43.39235",
        filetype: "tif",
        riverThreshold: 25,
        subbasinThreshold: 4,
      },
      geojsonsLayers: new Array(),
      showFeatureExtrCard: false,
      showTimnWaiter: false,
      templayer: [], //特征提取图层展示临时展示结果
      saveFeatureExtractionDataTag: true, //存储特征提取按钮是否可用
      tempOutLetFeature: new Feature(),
      // 模拟结果卡片
      showSimulationCard: false,
      simulationReaultList: {
        basinData: {
          visible: false,
          data: [
            {
              name: "wangjiaba",
              layer: "",
              usable: true,
              visible: false,
              outletLonLat: "115.597,32.428",
              outletFeature: new Feature(),
              simulationData: [],
            },
          ],
        },
      },
      // 流域数据
      showBasinDataList: false,
      basinData: [],
      basinLayersExist: [],
      loadingtag: false, // 流域提取过程等待加载

      /**水文气象站点数据*/
      showRiverStationData: false,
      riverMeteStationData: [],

      featureAttribute: [
        {
          name: "ID",
          value: "62914200",
        },
        {
          name: "Lon",
          value: 118.546111,
        },
        {
          name: "Lat",
          value: 32.156944,
        },
        {
          name: "Name",
          value: "晓桥",
        },
        {
          name: "BasinName",
          value: "淮河流域",
        },
        {
          name: "Type",
          value: "ZQ",
        },
      ],
      showAttribute: false,
      /**图表数据*/
      charts: "",
      showChart: false,
      tempSimuData: [],
      /**模型模拟变量 */
      startTime: new Date("2013-01-01"),
      endTime: new Date("2013-10-31"),
      timeStep: 24,
      modelInfo: {
        modelPath: "E:/working/HHU_NNU/Program/HydroModelExe/XAJ",
        programName: "ExeXAJ.exe",
        modelName: "xaj",
      },
      chosedBasinName: "", //选择的预报流域
      chosedModelName: "", //选择的模型名称
      chosedParam: "",
      showSimulationTag: true,
      simulationStartTag: false,
      simulationBasinIndex: 0,
      // 配置卡片的显示影藏控制
      activateCardID: "",
      /**参数率定分析 */
      showSA: false, //已弃置
      paramTableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 弄",
          zip: 200333,
        },
      ],
      componentID: "SAProblemDdfin",
      activeStepID: 0,
      showCA: false,
      CA_PickOutletTag: false, //拾取出水口信息
      CAForm: {
        basinName: "huaiheliuyu",
        riverbasin: "Longhekou",
        outLetName: "Longhekou",
        startTime: "2014010100",
        warmupTime: "2015010100",
        endTime: "2018123100",
        step: 24,
        Interval: false,
        method1: "SCE-UA",
        disModel: "None",
        disModels: [],
        model1: "",
        roffModels: [
          {
            value: "SWATPlus",
            label: "SWATPlus",
          },
          {
            value: "XAJ",
            label: "XAJ",
          },
          {
            value: "HBV",
            label: "HBV",
          },
        ],
        model2: "",
        routModels: [
          {
            value: "None",
            label: "None",
          },
          {
            value: "SWMM_DW",
            label: "SWMM_DW",
          },
          {
            value: "SWMM_KW",
            label: "SWMM_KW",
          },
          {
            value: "SWMM_DWNI",
            label: "SWMM_DWNI",
          },
        ],
        model3: "",
        rivers: [],
      },
      calibrationLoader: false,
      CA_result: [
        {
          name: "FC",
          value: "110.072754",
        },
        {
          name: "BETA",
          value: "2.0304348",
        },
        {
          name: "CET",
          value: "0.95167613",
        },
        ,
        {
          name: "K0",
          value: "0.82055783",
        },
        {
          name: "K1",
          value: "0.30546504",
        },
        {
          name: "K2",
          value: "0.0068685473",
        },
        {
          name: "LP",
          value: "0.9997098",
        },
        {
          name: "PERC",
          value: "1.9781784",
        },
        {
          name: "UZL",
          value: "16.474104",
        },
        {
          name: "CS",
          value: "0.6487571",
        },
      ],
      CA_result_chat: "",
      showCaResult: false,
      // 水文前处理参数
      HydroProProcessResult:"",
      HydroProProcessForm: {
        tag:"",
        HPPLoader: false,
        mode:"fit",
        modes: [{
          value: "fit",
          label: "训练模式"
        }, {
          value: "refcst",
          label: "历史模式"
        }, 
        {
          value: "fcst", 
          label: "实时模式"

        }],
        ifShow:false,
        outLetName: "Longhekou",
        riverbasin: "Longhekou",
        basinName: "dongnanzhuheliuyu",
        startTime: "2012010100",
        endTime: "2014040100",
        leadTime: 10,
        Interval: false,
        step: 24,
        data: "GEFS",
        datas: [
          {
            value: "GEFS",
            label: "GEFS",
          },
        ],
        model1: "BJP",
        ProProcessModels: [
          {
            value: "BJP",
            label: "BJP",
          },
        ],
      },
      ISLoader: false,
      InitStausForm: {
        mode: false,
        basinName: "dongnanzhuheliuyu",
        riverbasin: "Longhekou",
        outLetName: "Longhekou",
        warmupTime: "2012010100",
        startTime: "2013010500",
        endTime: "2013070600",
        step: 24,
        daModel: "EnKF",
        daModels: [
          {
            value: "IMG",
            label: "IMG",
          },
        ],

        model1: "XAJLump",
        roffModels: [
          {
            value: "SWATPlus",
            label: "SWATPlus",
          },
          {
            value: "XAJ",
            label: "XAJ",
          },
          {
            value: "HBV",
            label: "HBV",
          },
        ],
        model2: "SWMM-KW",
        routModels: [
          {
            value: "KW",
            label: "KW",
          },
          {
            value: "DW",
            label: "DW",
          },
        ],

        parameter: "Parameter_xaj4",
      },
      // 流域模拟
      FSForm: {
        ifShow: false,
        basinName: "dongnanzhuheliuyu",
        riverbasin: "Longhekou",
        outLetName: "Longhekou",
        startTime: "2014010100",
        warmupTime: "2015010100",
        endTime: "2018123100",
        step: 24,
        model1: "XAJLump",
        roffModels: [
          {
            value: "SWATPlus",
            label: "SWATPlus",
          },
          {
            value: "XAJ",
            label: "XAJ",
          },
          {
            value: "HBV",
            label: "HBV",
          },
        ],
        model2: "SWMM-KW",
        routModels: [
          {
            value: "None",
            label: "None",
          },
          {
            value: "SWMM_DW",
            label: "SWMM_DW",
          },
          {
            value: "SWMM_KW",
            label: "SWMM_KW",
          },
          {
            value: "SWMM_DWNI",
            label: "SWMM_DWNI",
          },
        ],
        disModel: "None",
        disModels: [
          {
            value: "None",
            label: "None",
          },
          {
            value: "HECRAS",
            label: "HECRAS",
          },
        ],
        parameter: "Parameter_xaj4",
      },
      FS_PickOutletTag: false,
      CFLoader: false,
      FS_result: {
        times: [],
        value1: [],
        value2: [],
      },
      BasinsimIndicator: {
        Soil: "",
        Topography: "",
        LandUser: "",
        Precipitation: "",
        Season: "",
        CatchmentArea: "",
      },
      ShowParamRec: false, //展示参数推荐页面
      ParamRecSent: "", //传递给参数推荐页面的消息
      // 水文后处理
      EF_PickOutletTag: false,
      EnsembleForm: {
        mode: false,
        basinName: "dongnanzhuheliuyu",
        riverbasin: "Longhekou",
        outLetName: "Longhekou",
        leadTime: "10",
        timeStep: "24",
        startTime: "2012010100",
        warmTime: "2013010100",
        endTime: "2013010500",
        roffModel: "XAJLump",
        roffModels: [
          {
            value: "XAJ",
            label: "XAJ",
          },
          {
            value: "HBV",
            label: "HBV",
          },
          {
            value: "SWATPlus",
            label: "SWATPlus",
          },
        ],
        routModel: "SWMM-KW",
        routModels: [

          {
            value: "SWMM_DW",
            label: "SWMM_DW",
          },
          {
            value: "SWMM_KW",
            label: "SWMM_KW",
          },
          {
            value: "SWMM_DWNI",
            label: "SWMM_DWNI",
          },
        ],
      },
      // 实时水文集合预报

      realTimeEnsembleForm: {
        riverbasin: "huaibin",
        outLetName: "huaibin",
        leadTime: "7",
        startTime: "2023110200",
        roffModel: "XAJ",
        roffModels: [],
        routModel: "LagK",
        routModels: [],
        disModel: "None",
        disModels: [],
        nearData: "",
        nearDataSources: [],
        fcstData: "",
        fcstDataSources: [],
      },

      HyPPForm: {
        mode: false,
        ifShow: false,
        basinName: "dongnanzhuheliuyu",
        riverbasin: "Longhekou",
        outLetName: "Longhekou",
        startTime: "2006",
        endTime: "2013",
        step: 24,
        leadtime: 10,
        startForcast: "2013070500",
        forcastTime: "2013070600",
        roffModel: "XAJLump",
        roffModels: [
          {
            value: "SWATPlus",
            label: "SWATPlus",
          },
          {
            value: "XAJ",
            label: "XAJ",
          },
          {
            value: "HBV",
            label: "HBV",
          },
        ],
        postProModel: "GLMPP",
        postProModels: [
          {
            value: "None",
            label: "None",
          },
          {
            value: "GLMPP",
            label: "GLMPP",
          }

        ],
        routModel: "SWMM-KW",
        routModels: [
          {
            value: "None",
            label: "None",
          },
          {
            value: "SWMM_DW",
            label: "SWMM_DW",
          },
          {
            value: "SWMM_KW",
            label: "SWMM_KW",
          },
          {
            value: "SWMM_DWNI",
            label: "SWMM_DWNI",
          },
        ],
        na: 3,
        buffer: 40,
        n_mem_generate: 500,
        flag_flood: true,
      },
      HyPP_PickOutletTag: false,
      HyPPLoader: false,
      EnsembleForecastLoader: false,
      EnsembleForecastResult: {
        fcst_pre: {
          time: [],
          obs_pre: [],
          fcst_pre: [],
        },
        relfcst: {
          time: [],
          median: [],
          obs: [],
          mean: [],
          Q05: [],
          Q25: [],
          Q75: [],
          Q95: [],
        },
        fcst: {
          time: [],
          median: [],
          obs: [],
          mean: [],
          Q05: [],
          Q25: [],
          Q75: [],
          Q95: [],
        },
      },
      RealtimeEnsembleForecastResult: {
        time: [],
        median: [],
        Q05: [],
        Q25: [],
        Q75: [],
        Q95: [],
      },
      HyPP_result: {
        simu: {
          times: [],
          simu: [],
          obs: [],
          Q05: [],
          Q25: [],
          Q50: [],
          Q75: [],
          Q95: [],
        },
        forecast: {
          times: [],
          obs: [],
          Q05: [],
          Q25: [],
          Q50: [],
          Q75: [],
          Q95: [],
        },
      },

      // 降水预报
      showRainfallConfig: true,
      rainFallConfigbasingrid: "WangjiabaBasin0_0p1_lonlat.csv", //预报区域格点数据
      rainFallConfigRawfcst: "GEFS0p1_ensmean_Wangjiaba_2017_lead10d.nc", //原始预报数据
      rainFallConfigObs: "obs_0p1_wangjiaba_20082016_daily.nc", //观测数据
      rainFallLead: "5",
      date: ["2008", "08", "06"],
      // date: ["2017", "04", "03"],
      rainfallStartTime: new Date("2008-01-01"),
      rainfallEndTime: new Date("2016-12-31"),
      rainFallSimTag: false,
      leadtime: 0,
      imageLayer: new Image(),
      rainfallInterval: null,
      showPlay: false,
      showRainfall: false,
      showRainfallForcast: false,
      showEnsembleForecast: false, //展示集合预报模拟结果
      ensembleForecastResult: [],
      imageSrc: config.ip + "SAIMG/Figure_1.png",
      // 预报验证

      verForm: {
        type: "deterministic",
        deterministic: "PCC",
        probabilistic: "CRPSS",
        categorical: "BSS",
        threshold: "0.1",
        percentileList: "10,20,30,40,50,60,70,80,90",
        latlon: "32.0 114.0",
        visualType: "curvedLine",
      },
      verificationLoader: false,
      verLayerConfig: {
        sliderValue: 0,
        step: 1,
        layers: [],
        max: 7,
      },
      verTileLayer: "",
      showSpatial: false,
    };
  },
  methods: {
    mousemove(e) {
      if (this.showAttribute) {
        var attributebox = document.getElementById("attributebox");
        //获取高度
        var heigth = attributebox.clientHeight;
        //获取宽度
        var width = attributebox.clientWidth;
        attributebox.style.left = e.clientX - width / 2 + "px";
        attributebox.style.top = e.clientY - heigth - 10 + "px";
      }
    },
    mouseDown(e) {
      if (this.showImportModel) {
        var importModelBox = document.getElementById("importModelBox");
        //获取高度
        var heigth = importModelBox.clientHeight;
        //获取宽度
        var width = importModelBox.clientWidth;
        importModelBox.style.left = e.clientX - width / 2 + "px";
        importModelBox.style.top = e.clientY + heigth + "px";
      }
    },
    uploadModelInputDataSuccess(response, file) {
      if (response["type"] == "error") {
        this.$message.error(response["message"]);
        this.importModelForm.dataName = response["filename"];
      } else {
        this.importModelForm.dataName = response["filename"];

        this.$message.success("文件上传成功!");
      }
    },
    importModel() {
      const _this = this;
      this.showImportModel = false;
      this.loadingtag = true;
      this.WatershedExtraction(
        this.importModelForm.station,
        this.importModelForm.basin,
        this.importModelForm.lon,
        this.importModelForm.lat,
        this.importModelForm.selectedimportModel,
        this.importModelForm.selectedimportHIS,
        this.importModelForm.reforecastdata1
      );
    },
    initMap() {
      // 天地图矢量底图
      this.tdtMap_vecLayer = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=vec_w&tk=ba83a5dc9758ca23aea593a39d998825&x={x}&y={y}&l={z}",
        }),
      });
      // 天地图影像底图
      this.tdtMap_imgLayer = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=img_w&tk=ba83a5dc9758ca23aea593a39d998825&x={x}&y={y}&l={z}",
        }),
      });
      // 天地图地形数据
      this.tdtMap_terLayer = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=ter_W&tk=ba83a5dc9758ca23aea593a39d998825&x={x}&y={y}&l={z}",
        }),
      });
      // 天地图矢量注记
      var tdtMap_cva = new TileLayer({
        source: new XYZ({
          url: "http://t4.tianditu.com/DataServer?T=cva_w&tk=ba83a5dc9758ca23aea593a39d998825&x={x}&y={y}&l={z}",
        }),
      });
      // 谷歌地形图地图
      this.googleMap_terLayer = new TileLayer({
        source: new XYZ({
          attributions:
            'Tiles © <a href="https://services.arcgisonline.com/ArcGIS/' +
            'rest/services/World_Topo_Map/MapServer">ArcGIS</a>',
          url:
            "https://server.arcgisonline.com/ArcGIS/rest/services/" +
            "World_Topo_Map/MapServer/tile/{z}/{y}/{x}",
        }),
      });
      // 绘制图层
      this.drawVectorLayer = new VectorLayer({
        source: new VectorSource(),
        style: new Style({
          fill: new Fill({
            color: "rgba(255, 255, 255, 0.2)",
          }),
          stroke: new Stroke({
            color: "Red",
            width: 2,
          }),
          image: new CircleStyle({
            radius: 8,
            fill: new Fill({
              color: "red",
            }),
          }),
        }),
      });

      // wms服务
      var untiled = new Image({
        source: new ImageWMS({
          ratio: 1,
          url: "http://localhost:8050/geoserver/GHFSystemData/wms",
          params: {
            FORMAT: format,
            VERSION: "1.1.1",
            STYLES: "",
            LAYERS: "GHFSystemData:subs1",
            exceptions: "application/vnd.ogc.se_inimage",
          },
        }),
      });

      var wmsSource = new TileWMSSource({
        url: "http://localhost:8050/geoserver/GHFSystemData/wms",
        params: {
          LAYERS: [
            "GHFSystemData:subs1",
            "GHFSystemData:Basin",
            "GHFSystemData:riv1",
            "GHFSystemData:lfp",
            "GHFSystemData:outlets1",
            "GHFSystemData:subbasin_stream",
            // "GHFSystemData:subbasin_upa",
          ],
        },
        serverType: "geoserver",
        crossOrigin: "anonymous",
      });

      var view = new View({
        projection: "EPSG:4326",
        center: [114.99128966078024, 33.262231628133215],
        zoom: 8,
      });

      this.map = new Map({
        target: "mapDiv",
        logo: false,
        layers: [this.tdtMap_vecLayer, tdtMap_cva, this.drawVectorLayer],
        view: view,
      });

      // 取消双击放大地图
      const dblClickInteraction = this.map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom;
        });
      this.map.removeInteraction(dblClickInteraction);
      var _this = this;

      // 鼠标移动显示坐标

      //鼠标悬浮
      let selected = null;
      this.map.on("pointermove", function (evt) {
        // var lonlat = proj.transform(evt.coordinate,"EPSG:3857","EPSg:4326");//坐标准换
        _this.lonlat =
          "[ " +
          evt.coordinate[0].toFixed(2) +
          ", " +
          evt.coordinate[1].toFixed(2) +
          " ]";

        if (selected !== null) {
          selected.setStyle(undefined);
          selected = null;
        }
        _this.map.forEachFeatureAtPixel(evt.pixel, function (f) {
          selected = f;
          // f.setStyle(highlightStyle);
          return true;
        });
        if (selected) {
          _this.featureAttribute[0].value = selected.get("FID_ChinaZ");
          _this.featureAttribute[1].value = selected.get("LON");
          _this.featureAttribute[2].value = selected.get("LAT");
          _this.featureAttribute[3].value = selected.get("NAME1");
          _this.featureAttribute[4].value = selected.get("BASIN1");
          let type = selected.get("TYPE");
          _this.featureAttribute[5].value = type;
          if (type == "ZQ") {
            _this.showAttribute = true;
          }
        } else {
          _this.showAttribute = false;
        }
      });
      // 鼠标点击事件

      this.map.on("singleclick", function (evt) {
        var coordinate = evt.coordinate;

        var feature = _this.map.forEachFeatureAtPixel(
          evt.pixel,
          function (feature, layerVetor) {
            return feature;
          }
        );
        if (feature) {
          let basinname = feature.get("name");
          let type = feature.get("type");
          let id = feature.get("Id");
          if (type == "outlet") {
            _this.drawGraph("chartbox", basinname, id);
          }
          let type2 = feature.get("TYPE");
          if (type2 == "ZQ") {
            _this.showAttribute = true;
            // 显示模型导入框
            if (_this.activeteFeatureExtraction) {
              _this.showImportModel = true;
              _this.importModelForm.basin = feature.get("BASIN2");
              _this.importModelForm.station = feature.get("NAME2");
              _this.importModelForm.lon = feature.get("LON");
              _this.importModelForm.lat = feature.get("LAT");
            }

            if (_this.CA_PickOutletTag) {
              _this.CAForm.outLetName = feature.get("NAME2");
              _this.CAForm.basinName = feature.get("BASIN2");
              console.log(feature)
              _this.CA_PickOutletTag = !_this.CA_PickOutletTag;
            }
            if (_this.FS_PickOutletTag) {
              _this.FSForm.outLetName = feature.get("NAME2");
              _this.FSForm.basinName = feature.get("BASIN2");
              _this.InitStausForm.outLetName = feature.get("NAME2");
              _this.InitStausForm.basinName = feature.get("BASIN2");
              _this.InitStausForm.HydroProProcessForm = feature.get("NAME2");
              _this.InitStausForm.HydroProProcessForm = feature.get("BASIN2");
              _this.FS_PickOutletTag = !_this.FS_PickOutletTag;
            }
            if (_this.EF_PickOutletTag) {
              _this.EnsembleForm.outLetName = feature.get("NAME2");
              _this.EnsembleForm.basinName = feature.get("BASIN2");
              _this.EF_PickOutletTag = !_this.EF_PickOutletTag;
            }
            if (_this.HyPP_PickOutletTag) {
              _this.HyPPForm.outLetName = feature.get("NAME2");
              _this.HyPPForm.basinName = feature.get("BASIN2");
              _this.HyPP_PickOutletTag = !_this.HyPP_PickOutletTag;
            }
          }
        }
      });

      this.outLetLayer.setSource(new VectorSource());
      this.outLetLayer.setStyle(
        new Style({
          image: new CircleStyle({
            radius: 6,
            fill: new Fill({
              color: "rgb(38,90,166)",
            }),
            stroke: new Stroke({
              color: "rgb(38,90,166)",
              width: 4,
            }),
          }),
        })
      );
      this.outLetLayer.setZIndex(999);
      this.showExistBasinLayers();

      this.map.addLayer(this.outLetLayer); //出水口坐标展示

      //要素展示图层
      // this.showPoints(117.384, 32.962);
      // 气象数据展示
      this.ShowMeteStationData();
    },
    // 背景图层展示
    showBackLayer(layerTag) {
      switch (layerTag) {
        case 1.1:
          //天地图矢量地图
          if (!this.uniqueLayer(this.tdtMap_vecLayer)) {
            this.map.getLayers().removeAt(0);
            this.map.getLayers().insertAt(0, this.tdtMap_vecLayer);
          }

          break;
        case 1.2:
          //天地图影像地图
          if (!this.uniqueLayer(this.tdtMap_imgLayer)) {
            this.map.getLayers().removeAt(0);
            this.map.getLayers().insertAt(0, this.tdtMap_imgLayer);
          }

          break;
        case 1.3:
          //天地图地形地图
          if (!this.uniqueLayer(this.tdtMap_terLayer)) {
            this.map.getLayers().removeAt(0);
            this.map.getLayers().insertAt(0, this.tdtMap_terLayer);
          }
          break;
        case 2.1:
          //谷歌矢量地图
          if (!this.uniqueLayer(this.googleMap_terLayer)) {
            this.map.getLayers().removeAt(0);
            this.map.getLayers().insertAt(0, this.googleMap_terLayer);
          }
          break;
        default:
          break;
      }
    },
    // 左侧图层树节点变换检测
    layertreeCheckChange(data, checked, indeterminate) {
      // 获取当前选中节点id
      var checkedArray = this.$refs.layertree.getCheckedKeys();
      if (checked === true) {
        //如果选中节点
        // 如果选中的节点是背景图层，则取消选择上一个背景图层，选择新的图层，即背景图层单选
        if (data.id <= 1.4 && data.id >= 1.1) {
          let backLayerIndex = checkedArray.indexOf(this.backLayersId);
          this.backLayersId = data.id;
          checkedArray.splice(backLayerIndex, 1);
          checkedArray.push(data.id);
        }
        this.checkedId = data.id;
        this.$refs.layertree.setCheckedKeys(checkedArray);

        //图层操作
        switch (data.id) {
          case 1.1:
            if (!this.uniqueLayer(this.tdtMap_vecLayer)) {
              this.map.getLayers().insertAt(0, this.tdtMap_vecLayer);
              // addLayer(this.tdtMap_vecLayer);
            }

            break;
          case 1.2:
            if (!this.uniqueLayer(this.tdtMap_imgLayer)) {
              this.map.getLayers().insertAt(0, this.tdtMap_imgLayer);
              // addLayer(this.tdtMap_vecLayer);
            }

            break;
          case 1.3:
            if (!this.uniqueLayer(this.tdtMap_terLayer)) {
              this.map.getLayers().insertAt(0, this.tdtMap_terLayer);
              // this.map.addLayer(this.tdtMap_terLayer);
            }
            break;
          case 1.4:
            console.log("加载谷歌地图");
            if (!this.uniqueLayer(this.googleMap_terLayer)) {
              console.log("加载谷歌地图");
              this.map.getLayers().insertAt(0, this.googleMap_terLayer);
              // this.map.addLayer(this.tdtMap_terLayer);
            }
            break;
          case 2.1: //河网图层
            // 加载河网图层
            this.loadStreamTag = true;
            break;
          case 2.2:
            // 加载流域边界
            // this.mapClicktag = true;
            if (this.basinInitialTag) {
              this.insertLayers(this.basinBorderLayer, -1);
              for (let index = 0; index < this.featuresLayers.length; index++) {
                var templayer = this.featuresLayers[index];
                if (templayer.name == "淮河") {
                  this.map.addLayer(templayer.layer);
                }
              }
            } else {
              swal({
                title: "请进行流域初始化工作",
                // text: "请输入坐标信息",
                buttons: "确定",
                icon: "error",
              });
            }

            break;
          case 2.3:
            if (this.basinInitialTag) {
              this.map.addLayer(this.basinstreamLayer);
            }

            // this.snapInteraction = new Snap({
            //   source: this.basinstreamLayer.getSource(),
            // });
            break;
          case 2.4:
            if (this.divideSubBasinTag) {
              this.map.addLayer(this.subBasinBorderLayers[0]);
              for (let index = 0; index < this.featuresLayers.length; index++) {
                var templayer = this.featuresLayers[index];
                if (templayer.name == "王家坝") {
                  this.map.addLayer(templayer.layer);
                }
              }
            } else {
              swal({
                title: "子流域尚未划分！",
                // text: "请输入坐标信息",
                buttons: "确定",
                icon: "error",
              });
            }

            break;
          case 2.5:
            if (this.divideSubBasinTag) {
              this.map.addLayer(this.subBasinLayers[0]);
            } else {
              swal({
                title: "子流域尚未划分！",
                // text: "请输入坐标信息",
                buttons: "确定",
                icon: "error",
              });
            }

            break;
          case 2.6:
            this.map.addLayer(this.basinLayersExist[0].layers[0]);
            break;
          default:
            break;
        }
      } else {
        //如果取消选中节点
        if (this.checkedId == data.id) {
          this.$refs.layertree.setCheckedKeys(checkedArray);
        }
        switch (data.id) {
          case 1.1:
            if (this.uniqueLayer(this.tdtMap_vecLayer)) {
              this.map.removeLayer(this.tdtMap_vecLayer);
            }
            break;
          case 1.2:
            if (this.uniqueLayer(this.tdtMap_imgLayer)) {
              this.map.removeLayer(this.tdtMap_imgLayer);
            }
            break;
          case 1.3:
            if (this.uniqueLayer(this.tdtMap_terLayer)) {
              this.map.removeLayer(this.tdtMap_terLayer);
            }
            break;
          case 1.4:
            if (this.uniqueLayer(this.googleMap_terLayer)) {
              this.map.removeLayer(this.googleMap_terLayer);
            }
            break;
          case 2.1:
            this.loadStreamTag = false;
            if (this.uniqueLayer(this.streamLayer)) {
              this.map.removeLayer(this.streamLayer);
            }
            break;
          case 2.2:
            if (this.basinInitialTag) {
              if (this.uniqueLayer(this.basinBorderLayer)) {
                for (
                  let index = 0;
                  index < this.featuresLayers.length;
                  index++
                ) {
                  var templayer = this.featuresLayers[index];
                  if (templayer.name == "淮河") {
                    this.map.removeLayer(templayer.layer);
                  }
                }
                this.map.removeLayer(this.basinBorderLayer);
              }
            }

            break;
          case 2.3:
            if (this.basinInitialTag) {
              if (this.uniqueLayer(this.basinstreamLayer)) {
                this.map.removeLayer(this.basinstreamLayer);
                // this.snapInteraction = null;
              }
            }

            break;
          case 2.4:
            if (this.divideSubBasinTag) {
              if (this.uniqueLayer(this.subBasinBorderLayers[0])) {
                this.map.removeLayer(this.subBasinBorderLayers[0]);
                for (
                  let index = 0;
                  index < this.featuresLayers.length;
                  index++
                ) {
                  var templayer = this.featuresLayers[index];
                  if (templayer.name == "王家坝") {
                    this.map.removeLayer(templayer.layer);
                  }
                }
              }
            }

            break;
          case 2.5:
            if (this.divideSubBasinTag) {
              if (this.uniqueLayer(this.subBasinLayers[0])) {
                this.map.removeLayer(this.subBasinLayers[0].layers[0]);
              }
            }
            break;
          case 2.6:
            if (this.uniqueLayer(this.basinLayersExist[0].layers[0])) {
              this.map.removeLayer(this.basinLayersExist[0].layers[0]);
            }

            break;
          default:
            break;
        }
      }
    },
    // 判断map是否包含当前图层
    uniqueLayer(layer) {
      var mapTileLayers = this.map.getLayers().array_;
      for (let index = 0; index < mapTileLayers.length; index++) {
        const mapLayer = mapTileLayers[index];
        if (layer.ol_uid === mapLayer.ol_uid) {
          return true;
        }
      }
      return false;
    },
    //在特定位置插入图层
    insertLayers(layer, insertIndex) {
      // 插入图层，拓展图层数组
      this.map.addLayer(layer);

      var mapTileLayers = this.map.getLayers().array_;
      const layerCount = mapTileLayers.length;

      // 判断插入位置的合法性
      if (insertIndex < 3) {
        insertIndex = 3;
      } else if (insertIndex >= layerCount) {
        insertIndex = layerCount - 1;
      }

      // 调整图层位置
      for (let index = layerCount - 1; index > insertIndex; index--) {
        mapTileLayers[index] = mapTileLayers[index - 1];
      }
      mapTileLayers[insertIndex] = layer;
    },
    // 解析返回的html数据
    html_parse(strHtml) {
      var parse = new DOMParser();
      var htmlDoc = parse.parseFromString(strHtml, "text/html");
      var tb = htmlDoc.getElementsByClassName("featureInfo")[0];
      if (tb) {
        var rows = tb.rows;
        var tbDataHead = [];
        var tbData = [];
        for (let i = 0; i < rows.length; i++) {
          let cells = rows[i].cells;

          for (let j = 0; j < cells.length; j++) {
            let element = cells[j].innerHTML;
            if (i === 0) {
              tbDataHead.push(element);
            } else {
              tbData.push(element);
            }
          }
        }
        var dicTbData = new Array();
        for (let i = 0; i < tbDataHead.length; i++) {
          dicTbData[tbDataHead[i]] = tbData[i];
        }
        return dicTbData;
      } else {
        return null;
      }
    },
    // 判断当前鼠标是否点在某个流域内
    isLayerContain(bound, currentCoor) {
      // bound:[minlon,minlat,maxlon,maxlat] currentCoor:[lon,lat]
      var minlon, minlat, maxlon, maxlat, lon, lat;
      minlon = bound[0];
      minlat = bound[1];
      maxlon = bound[2];
      maxlat = bound[3];
      lon = currentCoor[0];
      lat = currentCoor[1];
      if (lon >= minlon && lon <= maxlon) {
        if (lat >= minlat && lat <= maxlat) {
          return true;
        }
      }
      return false;
    },

    // 漫游
    roaming() {
      console.log("roaming");
    },

    //绘制点
    drawPoint() {
      // 添加绘制交互事件
      // 绘制样式
      //type： 'Point', 'LineString', 'LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection', 'Circle'.
      const pointDraw = new Draw({
        source: this.drawVectorLayer.getSource(),
        type: "Point",
      });
      this.map.addInteraction(pointDraw);
      if (this.snapInteraction) this.map.addInteraction(this.snapInteraction);
      pointDraw.setActive(true);
      pointDraw.on("drawend", (e) => {
        pointDraw.setActive(false);
        let lonlat = e.feature.getGeometry().getCoordinates().splice(",");
        console.log(lonlat[0].toFixed(3));

        this.outletCor = lonlat[0].toFixed(6) + ", " + lonlat[1].toFixed(6);
      });
    },
    //绘制多边形
    drawPolygon() {
      //type： 'Point', 'LineString', 'LinearRing', 'Polygon', 'MultiPoint', 'MultiLineString', 'MultiPolygon', 'GeometryCollection', 'Circle'.
      const _this = this;
      const PolygonDraw = new Draw({
        source: this.drawVectorLayer.getSource(),
        type: "Polygon",
      });
      this.map.addInteraction(PolygonDraw);

      PolygonDraw.setActive(true);

      PolygonDraw.on("drawend", (e) => {
        console.log(e);
        PolygonDraw.setActive(false);
        console.log(e.feature.getGeometry().getCoordinates());
      });
    },
    //绘制矩形
    drawBox() {
      const boxDraw = new Draw({
        source: this.drawVectorLayer.getSource(),
        type: "Circle",
        geometryFunction: createBox(),
      });
      this.map.addInteraction(boxDraw);

      boxDraw.setActive(true);

      boxDraw.on("drawend", (e) => {
        boxDraw.setActive(false);
        const boxCoordinates = e.feature.getGeometry().getCoordinates()[0];
        // console.log("绘制要素坐标", boxCoordinates);
        const bbox =
          boxCoordinates[0][0] +
          "," +
          boxCoordinates[0][1] +
          "," +
          boxCoordinates[2][0] +
          "," +
          boxCoordinates[2][1];
        if (this.loadStreamTag) {
          // 添加水系数据
          var streamSource = new VectorSource({
            format: new GeoJSON(),
            url:
              "http://localhost:8050/geoserver/GHFSystemData/ows?service=WFS&version=1.0.0&request=GetFeature&typename=GHFSystemData:huaihestreamshp&outputformat=application/json&bbox=" +
              bbox,
          });
          this.streamLayer = new VectorLayer({
            source: streamSource,
            style: new Style({
              stroke: new Stroke({
                color: "Blue",
                width: 2,
              }),
            }),
          });
          this.map.addLayer(this.streamLayer);
          this.snapInteraction = new Snap({
            source: this.streamLayer.getSource(),
          });

          this.loadStreamTag = false;
        }
      });
    },
    //绘制回退
    rollBack() {
      var drawSource = this.drawVectorLayer.getSource();
      var features = drawSource.getFeatures();
      if (features.length <= 0) {
        console.log("No Draw Features!");
        return 0;
      }
      drawSource.removeFeature(features[features.length - 1]);
      // console.log(drawSource.getFeatures());
    },
    //上传初始化流域数据
    uploadBasBound() {
      var min = this.watershedMinLonLat.split(",");
      var max = this.watershedMaxLonLat.split(",");
      var outlet = this.outletLonLat.split(",");
      console.log(min, max, outlet);
      // if (min == "" || max == "" || outlet == "") {
      //   swal({
      //     title: "输入错误！",
      //     text: "请输入坐标信息",
      //     buttons: "确定",
      //   });
      //   return 0;
      // } else {
      //   if (min.length != 2 || max.length != 2 || outlet.length != 2) {
      //     swal({
      //       title: "格式错误！",
      //       text: "请按照提示格式输入坐标信息",
      //       buttons: "确定",
      //     });
      //   }
      //   return 0;
      // }
      var postData = {
        boundary: {
          xMax: 118.580704716701,
          xMin: 111.955704716701,
          yMax: 34.9041733333333,
          yMin: 30.95834,
        },
        outlet: {
          X: 117.384,
          Y: 32.962,
        },
      };
      // axios
      //   .post("http://localhost:8181/uploadBasBound", postData)
      //   .then((resp) => {
      //     console.log(resp);
      //   });
    },
    //流域初始化
    basinInitial() {
      const _this = this;
      this.basinInitialLoadingTag = !this.basinInitialLoadingTag;
      this.basinInitialbtndisableTag = !this.basinInitialbtndisableTag;
      //  var min = this.watershedMinLonLat.split(",");
      // var max = this.watershedMaxLonLat.split(",");
      // var outlet = this.outletLonLat.split(",");
      // console.log(min, max, outlet);
      // if (min == "" || max == "" || outlet == "") {
      //   swal({
      //     title: "输入错误！",
      //     text: "请输入坐标信息",
      //     buttons: "确定",
      //   });
      //   return 0;
      // } else {
      //   if (min.length != 2 || max.length != 2 || outlet.length != 2) {
      //     swal({
      //       title: "格式错误！",
      //       text: "请按照提示格式输入坐标信息",
      //       buttons: "确定",
      //     });
      //   }
      //   return 0;
      // }
      const fillStyle = new Style({
        fill: new Fill({
          color: "rgba(255, 255, 255, 0.7)",
        }),
        stroke: new Stroke({
          color: "black",
          width: 1,
        }),
      });
      const strokeStyle = new Style({
        stroke: new Stroke({
          color: "blue",
          width: 1,
        }),
      });
      // 111.955704716701,30.95834
      // 118.580704716701,34.9041733333333
      // 117.384,32.962
      var postData = {
        boundary: {
          xMax: 118.580704716701,
          xMin: 111.955704716701,
          yMax: 34.9041733333333,
          yMin: 30.95834,
        },
        outlet: {
          X: 117.384,
          Y: 32.962,
        },
      };
      setTimeout(() => {
        _this.basinInitialLoadingTag = !_this.basinInitialLoadingTag;
        _this.basinInitialbtndisableTag = !_this.basinInitialbtndisableTag;
        _this.watershedIniTag = !_this.watershedIniTag;
        console.log("流域初始化");
        _this.basinstreamLayer = new TileLayer({
          source: new TileWMSSource({
            url: "http://localhost:8050/geoserver/GHFSystemData/wms",
            params: {
              LAYERS: ["GHFSystemData:RstHuaiHeBasinStream"],
            },
            serverType: "geoserver",
            crossOrigin: "anonymous",
          }),
        });
        _this.basinBorderLayer = new TileLayer({
          source: new TileWMSSource({
            url: "http://localhost:8050/geoserver/GHFSystemData/wms",
            params: {
              LAYERS: ["GHFSystemData:basinborder"],
            },
            serverType: "geoserver",
            crossOrigin: "anonymous",
          }),
        });

        _this.showPoints(117.384, 32.962, "淮河");
        _this.basinInitialTag = true;
      }, 3000);

      // axios
      //   .post("http://localhost:8181/basinInitial", postData)
      //   .then((resp) => {
      //     if (resp.data === "OK") {
      //       this.basinInitialLoadingTag = !this.basinInitialLoadingTag;
      //       this.basinInitialbtndisableTag = !this.basinInitialbtndisableTag;
      //       _this.watershedIniTag = !this.watershedIniTag;
      //       console.log("流域初始化");
      //       _this.basinstreamLayer = new VectorLayer({
      //         source: new VectorSource({
      //           url: "http://localhost:8181/static/BasinData/huaihe/stream.json",
      //           format: new GeoJSON(),
      //         }),
      //         style: strokeStyle,
      //       });
      //       _this.basinBorderLayer = new VectorLayer({
      //         source: new VectorSource({
      //           url: "http://localhost:8181/static/BasinData/huaihe/basinborder.json",
      //           format: new GeoJSON(),
      //         }),
      //         style: fillStyle,
      //       });
      //     }
      //   });
    },
    // 子流域划分
    DivideSubBasin() {
      const _this = this;
      this.addOutletLoadingTag = !this.addOutletLoadingTag;
      this.addOutletbtndisableTag = !this.addOutletbtndisableTag;

      setTimeout(() => {
        var subBasinLayer = new TileLayer({
          source: new TileWMSSource({
            url: "http://localhost:8050/geoserver/GHFSystemData/wms",
            params: {
              LAYERS: ["GHFSystemData:Wangjiaba_subBasin"],
            },
            serverType: "geoserver",
            crossOrigin: "anonymous",
          }),
        });

        var subBasinBorderLayer = new TileLayer({
          source: new TileWMSSource({
            url: "http://localhost:8050/geoserver/GHFSystemData/wms",
            params: {
              LAYERS: ["GHFSystemData:Wangjiaba_basinborder"],
            },
            serverType: "geoserver",
            crossOrigin: "anonymous",
          }),
        });

        _this.subBasinLayers.push(subBasinLayer);
        _this.subBasinBorderLayers.push(subBasinBorderLayer);

        _this.showPoints(115.597, 32.428, "王家坝");

        _this.divideSubBasinTag = true;

        _this.addOutletTag = !_this.addOutletTag;
        _this.addOutletLoadingTag = !_this.addOutletLoadingTag;
        _this.addOutletbtndisableTag = !_this.addOutletbtndisableTag;
      }, 2000);
    },
    // 水文分析方法选择
    hydrAnalysis(command) {
      console.log(command);
      switch (command) {
        case "1":
          this.watershedIniTag = !this.watershedIniTag;
          break;
        case "2":
          this.addOutletTag = !this.addOutletTag;

          break;
        case "3":
          this.showModelConfig = !this.showModelConfig;

          break;
        default:
          break;
      }
    },
    // 模型选择
    modelChosedhand(command) {
      this.modelInfo = this.modellist[command].info;
      this.chosedModelName = this.modellist[command].name;
      this.modelParamsList = this.modellist[command].params;
    },
    showInputDataDown(index) {
      console.log("点击了图层");
      const itemIndex = index.split("-");
      // this.inputDataShow[itemIndex[0] - 1] =
      //   this.dataList[itemIndex[0] - 1].data[itemIndex[1] - 1].name;
      this.dataList[itemIndex[0] - 1].showData =
        this.dataList[itemIndex[0] - 1].data[itemIndex[1] - 1].name;
      // console.log(itemIndex);
    },
    //预报流域选择
    basinChose(command) {
      this.simulationBasinIndex = command;
      let basinItem = this.simulationReaultList.basinData.data[command];
      var lonlat = basinItem.outletLonLat.split(",");
      this.chosedBasinName = basinItem.name;
      basinItem.visible = true;
      const showLayer = this.basinLayersExist[command].layers[0];
      this.map.addLayer(showLayer);
      //展示出水口
      this.outLetLayer.getSource().addFeatures(basinItem.outletFeature);

      //缩放至流域
      this.map.getView().setCenter([Number(lonlat[0]), Number(lonlat[1])]);
    },
    // 模型参数方案选择
    paramChose(command) {
      this.chosedParam = this.modelParamsList[command];
    },
    basinFileTypeChose(commond) {
      this.basinInfo.filetype = this.basinFileType[commond];
    },
    // 获取流域数据列表
    showExistBasinLayers() {
      return new Promise((resolve, reject) => {
        let _this = this;
        let userID = this.useInfo.id;
        let postData = {
          type: "BasinData",
          userId: userID,
        };

        axios.post(config.ip + "getDataByType", postData).then((resp) => {
          // console.log("data", resp.data);
          _this.basinData = [];
          for (let index = 0; index < resp.data.length; index++) {
            const dataitem = resp.data[index];
            let basinLayerItem = new TileLayer({
              source: new TileWMSSource({
                url: config.geoServerIp + "GHFSystemData/wms",
                params: {
                  LAYERS: dataitem.url,
                },
                serverType: "geoserver",
                crossOrigin: "anonymous",
              }),
            });
            let outletFeature_temp = _this.showOutlet(
              dataitem.extraInfo.outlet.lon,
              dataitem.extraInfo.outlet.lat,
              dataitem.name,
              0
            );
            _this.basinData.push({
              name: dataitem.name,
              layers: basinLayerItem,
              outlet: [
                dataitem.extraInfo.outlet.lon,
                dataitem.extraInfo.outlet.lat,
              ],
              outletFeature: outletFeature_temp,
              visible: false,
            });
            // _this.simulationReaultList.basinData.data[0].outletFeature =
            //   _this.showOutlet(
            //     dataitem.extraInfo.outlet.lon,
            //     dataitem.extraInfo.outlet.lat,
            //     dataitem.name,
            //     0
            //   );
          }
          resolve("ok");
        });
      });
    },
    /**特征提取 */
    showFeatureExtractionModelConfig() {
      const _this = this;
      // 旧版流域提取页面控制
      this.activeteFeatureExtraction = !this.activeteFeatureExtraction;
      if (this.activeteFeatureExtraction) {
        _this.$notify.info({
          title: "流域提取功能开启",
        });
        _this.showConfigCard("featureExtract");
      } else {
        _this.$notify.info({
          title: "流域提取功能关闭",
        });
        _this.exitConfigCard("featureExtract");
      }

      // this.showFeatureExtrCard = !this.showFeatureExtrCard;
      // var modelInfo = {
      //   userID: "",
      //   modelID: "16356e95-0353-4b53-9fe1-d909bbbb2b9d",
      // };
      // if (this.showFeatureExtrCard) {
      //   axios.post(config.ip + "getModelConfig", modelInfo).then((resp) => {
      //     console.log(resp.data);
      //   });
      // }
    },
    featureExtraction() {
      this.showTimnWaiter = true;
      const _this = this;
      axios
        .post(config.ip + "featureExtraction", _this.basinInfo)
        .then((resp) => {
          if (resp.data.status == "ok") {
            let urls = resp.data.urls;
            // 展示流域图层
            // _this.showBasinGeojsons(
            //   "http://localhost:8181/tempGeojson/dongliaohe_border.json",
            //   "http://localhost:8181/tempGeojson/dongliaohe_subBasin.json",
            //   "http://localhost:8181/tempGeojson/dongliaohe_stream.json"
            // );
            _this.showBasinGeojsons(
              config.ip + urls[0],
              config.ip + urls[1],
              config.ip + urls[2]
            );
            this.geojsonsLayers.forEach((element) => {
              _this.map.addLayer(element);
            });

            // 展示出水口
            var lonlat = _this.basinInfo.OutletLonLat.split(",");

            _this.tempOutLetFeature = _this.showOutlet(
              lonlat[0],
              lonlat[1],
              _this.basinInfo.name,
              _this.simulationReaultList.basinData.data.length
            );
            _this.outLetLayer.getSource().addFeatures(_this.tempOutLetFeature);
            // _this.outLetLayer
            //   .getSource()
            //   .removeFeature(_this.tempOutLetFeature);
            _this.showTimnWaiter = false;
            _this.saveFeatureExtractionDataTag =
              !_this.saveFeatureExtractionDataTag;
          }
        });
    },
    saveFeatureExtractionData() {
      const _this = this;
      var postData = {
        basinInfo: this.basinInfo,
        userInfo: this.useInfo,
      };

      axios
        .post(config.ip + "saveFeatureExtractionData", postData)
        .then((resp) => {
          if (resp.data == "ok") {
            _this.saveFeatureExtractionDataTag =
              !_this.saveFeatureExtractionDataTag;
            _this.geojsonsLayers.forEach((layer) => {
              if (_this.uniqueLayer(layer)) {
                _this.map.removeLayer(layer);
              }
            });

            _this.simulationReaultList.basinData.data.push({
              name: _this.basinInfo.name,
              layer: "",
              usable: true,
              visible: false,
              outletLonLat: _this.basinInfo.OutletLonLat,
              outletFeature: _this.tempOutLetFeature,
            });
            _this.outLetLayer.getSource().clear();

            _this.saveFeatureExtractionLayer(_this.basinInfo.name);
            // 更新结果数据
            _this.showExistBasinLayers();
          }
        });
    },
    saveFeatureExtractionLayer(basinName) {
      var saveBasinLayer = new TileLayer({
        source: new TileWMSSource({
          url: "http://localhost:8050/geoserver/GHFSystemData/wms",
          params: {
            LAYERS: [
              "GHFSystemData:" + basinName + "_border",
              "GHFSystemData:" + basinName + "_subBasin",
              "GHFSystemData:" + basinName + "_stream",
            ],
          },
          serverType: "geoserver",
          crossOrigin: "anonymous",
        }),
      });

      this.basinLayersExist.push({
        name: basinName,
        layers: [saveBasinLayer],
      });
    },

    WatershedExtraction(
      name,
      basin,
      lon,
      lat,
      model,
      forceData,
      reForceData
    ) {
      if (!this.activeteFeatureExtraction) {
        return;
      }
      this.loadingtag = true;
      this.showAttribute = false;
      const _this = this;
      var postData = {
        name: name,
        basin: basin,
        userID: this.useInfo.id,
        lon: lon,
        lat: lat,
        forceData: forceData,
        model: model,
        reForceData: reForceData,
      };

      axios.post(config.ip + "WatershedExtraction", postData).then((res) => {
        _this.loadingtag = false;
        let resData = res.data;
        if (resData == "error") {
          _this.Notification("错误", "流域提取失败!");
        } else if (resData == "ok") {
          _this.Notification("成功", "流域提取成功！");
          _this.showExistBasinLayers().then((res) => {
            let index = _this.basinData.length - 1;

            _this.basinData[index].visible = true;

            _this.showResultBasinData(index);
          }); //更新数据列表
        } else {
          // 数据已存在
          _this.basinData[resData].visible = true;

          _this.showResultBasinData(resData);
        }
      });
      // 数据更新

      // String stationName = (String) stationInfo.get("name");
      //   String basinName = (String) stationInfo.get("basin");
      //   String userID = (String) stationInfo.get("userID");
      //   double lon = (double) stationInfo.get("lon");
      //   double lat = (double) stationInfo.get("lat");
    },
    /**水文分析 */
    startSimulation() {
      const _this = this;
      var postData = {
        basinName: this.chosedBasinName,
        startTime: this.startTime,
        endTime: this.endTime,
        timeStep: this.timeStep,
        modelPath: this.modelInfo.modelPath,
        programName: this.modelInfo.programName,
        modelName: this.modelInfo.modelName,
        paramName: this.chosedParam,
      };
      _this.simulationStartTag = !_this.simulationStartTag;
      axios.post("http://localhost:8181/runModel", postData).then((resp) => {
        // console.log(resp.data);
        console.log(resp);

        if (resp.data != "") {
          _this.showSimulationTag = !_this.showSimulationTag;
          _this.simulationStartTag = !_this.simulationStartTag;
          _this.simulationReaultList.basinData.data[
            _this.simulationBasinIndex
          ].simulationData = resp.data;
        }
      });
      // console.log(this.startTime.getTime());
    },
    // 加载geojson图层
    showGeojson(geojsonUrl) {
      const _this = this;
      var style1 = new Style({
        fill: new Fill({
          color: "rgba(255, 255, 255, 0.6)",
        }),
        stroke: new Stroke({
          color: "#000000",
          width: 1,
        }),
      });
      var vertorSoure = new VectorSource({
        projection: "EPSG:4326",
        url: geojsonUrl, //GeoJSON的文件路径，用户可以根据需求而改变
        format: new GeoJSON(),
      });
      vertorSoure.on("change", (event) => {
        if (vertorSoure.getState() === "ready") {
          const extent = vertorSoure.getExtent();

          let polygon = new Polygon([
            [
              [extent[0], extent[1]],
              [extent[2], extent[1]],
              [extent[2], extent[3]],
              [extent[0], extent[3]],
              [extent[0], extent[1]],
            ],
          ]);
          _this.map.getView().fit(polygon, { padding: [120, 450, 120, 120] });
        }
      });
      var loadLayer = new VectorLayer({
        source: vertorSoure,
        style: style1,
      });
      return loadLayer;
      // loadLayer.setSource(vertorSoure);
      // loadLayer.setStyle(style1);
    },
    showBasinGeojsons(url1, url2, url3) {
      const _this = this;
      var basinBordStyle = new Style({
        fill: new Fill({
          color: "rgba(255, 255, 255, 0.6)",
        }),
        stroke: new Stroke({
          color: "#000000",
          width: 1.5,
        }),
      });
      var subBasinStyle = new Style({
        fill: new Fill({
          color: "#CDE9F7",
        }),
        stroke: new Stroke({
          color: "#6E6E6E",
          width: 0.4,
        }),
      });
      var streamStyle = new Style({
        fill: new Fill({
          color: "rgb(0,0,255)",
        }),
        stroke: new Stroke({
          color: "rgb(0,0,255,0.5)",
        }),
      });

      // 流域边界
      var vertorSoure = new VectorSource({
        projection: "EPSG:4326",
        url: url1, //GeoJSON的文件路径，用户可以根据需求而改变
        format: new GeoJSON(),
      });
      vertorSoure.on("change", (event) => {
        if (vertorSoure.getState() === "ready") {
          const extent = vertorSoure.getExtent();

          let polygon = new Polygon([
            [
              [extent[0], extent[1]],
              [extent[2], extent[1]],
              [extent[2], extent[3]],
              [extent[0], extent[3]],
              [extent[0], extent[1]],
            ],
          ]);
          _this.map.getView().fit(polygon, { padding: [120, 450, 120, 120] });
        }
      });
      var layer1 = new VectorLayer({
        source: vertorSoure,
        style: basinBordStyle,
      });
      // 子流域
      var layer2 = new VectorLayer({
        source: new VectorSource({
          projection: "EPSG:4326",
          url: url2,
          format: new GeoJSON(),
        }),
        style: subBasinStyle,
      });
      // 河网
      var layer3 = new VectorLayer({
        source: new VectorSource({
          projection: "EPSG:4326",
          url: url3,
          format: new GeoJSON(),
        }),
        style: streamStyle,
      });
      this.geojsonsLayers.push(layer1);
      this.geojsonsLayers.push(layer2);
      this.geojsonsLayers.push(layer3);
    },
    /** 模拟结果卡片相关事件 */
    showResultBasinData(index) {
      var basinItem = this.basinData[index];
      var lonlat = basinItem.outlet;
      const showLayer = basinItem.layers;
      if (basinItem.visible) {
        this.map.addLayer(showLayer);
        //展示出水口
        this.outLetLayer.getSource().addFeatures(basinItem.outletFeature);
        //缩放至流域
        this.map.getView().setCenter([Number(lonlat[0]), Number(lonlat[1])]);
      } else {
        if (this.uniqueLayer(showLayer)) {
          this.map.removeLayer(showLayer);
          this.outLetLayer.getSource().clear();
        }
      }
    },
    /**通用方法 */
    // 在地图上展示坐标
    showOutlet(lon, lat, outletname, id) {
      const geojsonObject = {
        type: "FeatureCollection",
        crs: {
          type: "name",
          properties: {
            name: "EPSG:4326",
          },
        },
        features: [
          {
            type: "Feature",
            properties: { Id: id, name: outletname, type: "outlet" },
            geometry: {
              type: "Point",
              coordinates: [lon, lat],
            },
          },
        ],
      };
      let features = new GeoJSON().readFeatures(geojsonObject);

      return features;
    },
    // 图表
    drawGraph(id, name, daindex) {
      let simulationData =
        this.simulationReaultList.basinData.data[daindex].simulationData;

      if (simulationData == "") {
        return null;
      }
      this.showChart = !this.showChart;

      var charts = echarts.init(document.getElementById(id));

      var option;

      let base = +new Date(2013, 1, 1);

      let oneDay = 24 * 3600 * 1000;
      // let data = [[base, Math.random() * 300]];
      let data = [];

      simulationData.forEach((element) => {
        let now = new Date((base += oneDay));
        let value = Number(element);
        data.push([now, value]);
      });
      // for (let i = 1; i < 20000; i++) {
      //   let now = new Date((base += oneDay));
      //   data.push([
      //     +now,
      //     Math.round((Math.random() - 0.5) * 20 + data[i - 1][1]),
      //   ]);
      // }
      option = {
        tooltip: {
          trigger: "axis",
          position: function (pt) {
            return [pt[0], "10%"];
          },
        },
        title: {
          left: "center",
          text: name + " 1989年径流模拟",
        },
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "time",
          boundaryGap: false,
        },
        yAxis: {
          type: "value",
          name: "径流量",
          boundaryGap: [0, "100%"],
          axisLabel: {
            formatter: "{value} m3",
          },
        },
        dataZoom: [
          {
            type: "inside",
            start: 0,
            end: 20,
          },
          {
            start: 0,
            end: 20,
          },
        ],
        series: [
          {
            name: "Fake Data",
            type: "line",
            smooth: true,
            symbol: "none",
            areaStyle: {},
            data: data,
          },
        ],
      };
      charts.setOption(option);
      this.charts = charts;
    },
    showChartPanel(id, option) {
      var chartDom = document.getElementById(id);
      // if (width != null) {
      //   chartDom.style.width = width;
      // }
      // if (height != null) {
      //   chartDom.style.height = height;
      // }

      var myChart = echarts.init(chartDom);
      myChart.clear();
      option && myChart.setOption(option);
    },
    //展示通用气象站点
    ShowMeteStationData() {
      // this.comMeteorology[0].layer.setSource(
      //   new VectorSource({
      //     url: "http://172.21.212.124:8181/comMeteorology.json",
      //     format: new GeoJSON(),
      //   })
      // );

      // this.comMeteorology[0].layer.setStyle(
      //   new Style({
      //     image: new CircleStyle({
      //       radius: 7,
      //       fill: new Fill({
      //         color: "rgb(38,90,166)",
      //       }),
      //       // stroke: new Stroke({
      //       //   color: "rgb(38,90,166)",
      //       //   width: 4,
      //       // }),
      //     }),
      //   })
      // );
      // this.comMeteorology[0].layer.setZIndex(999);
      const _this = this;
      let userID = this.useInfo.id;
      let postData = {
        type: "BasinData",
        userId: userID,
      };
      axios.post(config.ip + "getRiver_StationData", postData).then((resp) => {
        // console.log("水系气象站点数据", resp.data);
        for (let index = 0; index < resp.data.length; index++) {
          const dataitem = resp.data[index];

          let basinLayerItem;
          if (dataitem.urlFormat == "Geojson") {
            console.log("geojson" + config.ip + "ChinaZQ_BasinName.json");
            //加载geojson矢量图层
            basinLayerItem = new VectorLayer({
              source: new VectorSource({
                url: config.ip + "ChinaZQ_BasinName.json",
                format: new GeoJSON(),
              }),
            });
            basinLayerItem.setStyle(
              new Style({
                image: new CircleStyle({
                  radius: 6,
                  fill: new Fill({
                    color: "rgb(38,90,166)",
                  }),
                  // stroke: new Stroke({
                  //   color: "rgb(38,90,166)",
                  //   width: 4,
                  // }),
                }),
              })
            );
          } else {
            basinLayerItem = new TileLayer({
              //加载geoserver切片图层
              source: new TileWMSSource({
                url: config.geoServerIp + "GHFSystemData/wms",
                params: {
                  LAYERS: dataitem.url,
                },
                serverType: "geoserver",
                crossOrigin: "anonymous",
              }),
            });
          }

          _this.riverMeteStationData.push({
            name: dataitem.name,
            layers: basinLayerItem,
            visible: false,
          });
        }
      });
      // this.comMeteorology.setSource(
      //   new TileWMSSource({
      //     url: "http://localhost:8050/geoserver/GHFSystemData/wms",
      //     params: {
      //       LAYERS: ["GHFSystemData:ChinaZQ"],
      //     },
      //     serverType: "geoserver",
      //     crossOrigin: "anonymous",
      //   })
      // );
      // this.comMeteorology.setZIndex(999);
      // this.map.addLayer(_this.comMeteorology);
    },
    showRiverResultStationData(item) {
      if (item.visible) {
        this.map.addLayer(item.layers);
      } else {
        if (this.uniqueLayer(item.layers)) {
          this.map.removeLayer(item.layers);
        }
      }
    },
    /**滑动卡片控制 */
    showConfigCard(id, direction) {
      const configCard = document.getElementById(id);
      if (this.activateCardID != "") {
        this.exitConfigCard(this.activateCardID, direction);
        return;
      }

      // configCard.style.width = "300px";
      configCard.style.display = "flex";
      configCard.style.transform = "translate(0%, 0%)";
      switch (direction) {
        case "right":
          configCard.style.right = "10px";
          break;
        case "left":
          configCard.style.left = "10px";
          break;
        default:
          configCard.style.right = "10px";
          break;
      }
      // configCard.style.right = "10px";
      this.activateCardID = id;
    },
    exitConfigCard(id, direction) {
      const configCard = document.getElementById(id);
      const width = configCard.offsetWidth;
      let offset = -5 - width;
      switch (direction) {
        case "right":
          configCard.style.right = offset + "px";
          break;
        case "left":
          configCard.style.left = offset + "px";
          break;
        default:
          configCard.style.right = offset + "px";
          break;
      }
      this.activateCardID = "";
      // configCard.style.right = offset + "px";
    },
    deleteParamTableRow(index, rows) {
      rows.splice(index, 1);
    },
    hand_steps(stepIndex) {
      this.activeStepID = stepIndex;
      switch (stepIndex) {
        case 0:
          this.componentID = "SAProblemDdfin";
          break;
        case 1:
          this.componentID = "SAExpDesign";
          break;
        case 2:
          this.componentID = "SAAnalyze";
          break;
        case 3:
          this.componentID = "SAOpt";
          break;
        default:
          break;
      }
    },
    rainfall() {
      // console.log("我被调用了" + this.leadtime);
      if (!this.showRainfall) {
        this.map.removeLayer(this.imageLayer);

        return;
      }
      /**加载热力图和json */
      // var rainful = new VectorSource({
      //   url: "http://172.21.212.124:8181/rainfall2.json",
      //   // url: "http://172.21.212.124:8181/rainfall.json",
      //   format: new GeoJSON(),
      // });

      // // var heatmap = new Heatmap({
      // //   source: rainful,
      // //   blur: 20,
      // //   radius: 10,

      // //   weight: "weight",
      // // });
      // let styleFunction = function (feature) {
      //   let dn = feature.get("weight");
      //   console.log(dn);
      //   if (parseFloat(dn) == 0) {
      //     return new Style({
      //       stroke: new Stroke({
      //         color: "rgb(110,110,110,0.1)",
      //       }),
      //       fill: new Fill({
      //         color: "rgb(0,0,255)",
      //       }),
      //       s,
      //     });
      //   } else if (dn > 0 && dn <= 10) {
      //     return new Style({
      //       stroke: new Stroke({
      //         color: "rgb(110,110,110,0.1)",
      //       }),
      //       fill: new Fill({
      //         color: "rgb(182,237,240,0.5)",
      //       }),
      //     });
      //   } else if (dn > 10 && dn <= 15) {
      //     return new Style({
      //       stroke: new Stroke({
      //         color: "rgb(110,110,110,0.1)",
      //       }),
      //       fill: new Fill({
      //         color: "rgb(116,180,232)",
      //       }),
      //     });
      //   } else if (dn > 15 && dn <= 18) {
      //     return new Style({
      //       stroke: new Stroke({
      //         color: "rgb(110,110,110,0.1)",
      //       }),
      //       fill: new Fill({
      //         color: "rgb(31,131,224)",
      //       }),
      //     });
      //   } else if (dn > 18 && dn <= 22) {
      //     return new Style({
      //       stroke: new Stroke({
      //         color: "rgb(110,110,110,0.1)",
      //       }),
      //       fill: new Fill({
      //         color: "rgb(29,68,184)",
      //       }),
      //     });
      //   } else {
      //     return new Style({
      //       stroke: new Stroke({
      //         color: "rgb(110,110,110,0.1)",
      //       }),
      //       fill: new Fill({
      //         color: "rgb(9,9,145)",
      //       }),
      //     });
      //   }
      // };

      // var heatmap = new VectorLayer({
      //   source: rainful,
      //   style: styleFunction,
      // });
      // this.map.addLayer(heatmap);
      /**加载图片 */
      const extent = [113.25, 31.45, 115.65, 33.55]; //王家坝
      // const extent = [119.182854, 27.166469, 123.360253, 35.375766]; //东中国海
      // const extent = [114.8, 27.1, 122.8, 35.1]; //长三角
      const projection = new Projection({
        code: "xkcd-image",
        units: "pixels",
        extent: extent,
      });
      var rainfallUrl =
        config.ip +
        "rainfall/" +
        this.date[0] +
        "-" +
        this.date[1] +
        "-" +
        this.date[2] +
        "-" +
        this.leadtime +
        ".png";
      // var rainfallUrl = "http://172.21.212.124:8181/rainfall/1test2.png";
      // console.log(rainfallUrl)
      // var rainfallUrl =
      //   "http://172.21.212.124:8181/YangziRiverDeltaRainfal/removebac/" +
      //   this.date[0] +
      //   "-" +
      //   this.date[1] +
      //   "-" +
      //   this.date[2] +
      //   "-" +
      //   this.leadtime +
      //   ".png";
      var imageSource = new ImageStaticSource({
        url: rainfallUrl,
        // url: "http://172.21.212.124:8181/rainfall/2017-01-11-5.png",
        projection: projection,
        imageExtent: extent,
      });

      if (this.uniqueLayer(this.imageLayer)) {
        // 图层已存在
        this.map.removeLayer(this.imageLayer);
      }
      this.imageLayer = new Image({
        source: imageSource,
        opacity: 0.7,
      });
      this.map.addLayer(this.imageLayer);
    },

    rainfall_play() {
      const _this = this;
      this.showPlay = !this.showPlay;
      this.rainfallInterval = setInterval(() => {
        if (_this.leadtime == 6) {
          _this.leadtime = -1;
          console.log();
        }
        _this.leadtime++;
        /** 长三角*/
        // this.date
      }, 1000);
    },
    rainfall_clearInterval() {
      this.showPlay = !this.showPlay;
      clearInterval(this.rainfallInterval);
    },
    beforeBasinGridUpload(file) {
      this.rainFallConfigbasingrid = file.name;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeRawfcstUpload(file) {
      this.rainFallConfigRawfcst = file.name;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeObsUpload(file) {
      this.rainFallConfigObs = file.name;
      // this.imageUrl = URL.createObjectURL(file.raw);
    },
    startRainFallSim() {
      const _this = this;
      this.rainFallSimTag = true;
      let modelinfo = {
        name: "BJP",
      };
      axios.post(config.ip + "runBJP", modelinfo).then((rsp) => {
        _this.rainFallSimTag = false;
        _this.ensembleForecastResult.push({
          name: "王佳坝预报结果",
          visible: false,
        });
      });
    },
    showRainFallResult() {
      this.showRainfall = !this.showRainfall;
      this.rainfall();
    },
    Notification(type, message) {
      if (type == "错误") {
        this.$notify.error({
          title: "错误",
          message: message,
        });
      } else if (type == "成功") {
        this.$notify({
          title: "成功",
          message: message,
          type: "success",
        });
      }
    },
    // 参数率定
    CA_PickOutlet() {
      //拾取出水口信息
      this.CA_PickOutletTag = !this.CA_PickOutletTag;
      if (this.CA_PickOutletTag) {
        this.$notify.info({
          title: "开启站点信息拾取！",
        });
      } else {
        this.$notify.info({
          title: "关闭站点信息拾取！",
        });
      }
    },
    calibration() {
      const _this = this;
      //1.判断参数是否输入完整
      if (this.CAForm.riverbasin == "") {
        this.$notify.error({
          title: "请输入流域！",
        });
        return;
      }
      if (this.CAForm.outLetName == "") {
        this.$notify.error({
          title: "请输入出水口信息！",
        });
        return;
      }
      if (this.CAForm.startTime == "") {
        this.$notify.error({
          title: "请选择开始时间！",
        });
        return;
      }
      if (this.CAForm.warmupTime == "") {
        this.$notify.error({
          title: "请选择预热期！",
        });
        return;
      }
      if (this.CAForm.endTime == "") {
        this.$notify.error({
          title: "请选择结束时间！",
        });
        return;
      }
      if (this.CAForm.step == "") {
        this.$notify.error({
          title: "请设置时间步长！",
        });
        return;
      }
      if (this.CAForm.method1 == "") {
        this.$notify.error({
          title: "请选择率定方法！",
        });
        return;
      }
      if (this.CAForm.model1 == "") {
        this.$notify.error({
          title: "请选择产流模型！",
        });
        return;
      }
      if (this.CAForm.model2 == "") {
        this.$notify.error({
          title: "请选择汇流模型！",
        });
        return;
      }
      // if (this.CAForm.model2 == "" && this.CAForm.model3 == "") {
      //   this.$notify.error({
      //     title: "模型配置错误！",
      //     message: "请选择流域汇流模型或河道演算模型!",
      //   });
      //   return;
      // }

      const CAcontainer = document.getElementById("CAcontainer");
      CAcontainer.scrollTop = 0;
      CAcontainer.style.overflow = "hidden";
      this.calibrationLoader = true;
      axios.post(config.ip + "ParamCalibration", this.CAForm).then((resp) => {
        _this.CA_result_chat = resp.data.pop();
        _this.CA_result = resp.data;

        _this.calibrationLoader = false;
        _this.showCaResult = true;
        CAcontainer.style.overflow = "auto";
      });

      // setTimeout(() => {
      //   _this.calibrationLoader = false;
      //   _this.showImage = true;
      //   CAcontainer.style.overflow = "auto";
      // }, 5000);
    },
    CA_resultAnalysis() {
      // this.CA_result_chat
      if (this.CA_result_chat === "") {
        return;
      }
      const _this = this;

      let CA_result = this.CA_result_chat;

      let obsStream = [];
      let simStream = [];
      let prcp = [];
      let time = [];
      for (let index = 0; index < CA_result.values.length; index++) {
        const element = CA_result.values[index];
        obsStream.push(element[0]);
        simStream.push(element[1]);
        prcp.push(element[2]);
        time.push(element[3]);
      }
      // 配置图表
      let option = {
        title: {
          text: "径流过程线",
          left: "center",
        },
        grid: {
          bottom: 80,
        },

        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765",
            },
          },
        },
        legend: {
          data: ["观测流量", "模拟流量", "观测降水"],
          // data: ["观测流量", "模拟流量"],
          left: 120,
          top: 25,
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 65,
            end: 85,
          },
          {
            type: "inside",
            realtime: true,
            start: 65,
            end: 85,
          },
        ],
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            axisLine: { onZero: false },
            // prettier-ignore
            data: time,
          },
        ],
        yAxis: [
          {
            name: "流量(m³/s)",
            type: "value",
          },

          {
            name: "降水(mm)",
            nameLocation: "start",
            alignTicks: true,
            type: "value",
            inverse: true,
          },
        ],
        series: [
          {
            name: "模拟流量",
            type: "line",

            lineStyle: {
              width: 2,
              // color: "#000000",
              type: "dashed",
            },
            emphasis: {
              focus: "series",
            },

            // prettier-ignore
            data: simStream,
          },
          {
            name: "观测流量",
            type: "line",

            lineStyle: {
              width: 2,
              // color: "#e92429",
            },
            emphasis: {
              focus: "series",
            },

            // prettier-ignore
            data: obsStream,
          },

          {
            name: "观测降水",
            type: "line",
            yAxisIndex: 1,

            lineStyle: {
              width: 2,
              // color: "#5470c6",
            },
            emphasis: {
              focus: "series",
            },

            // prettier-ignore
            data: prcp,
          },
        ],
      };
      _this.showChartPanel("chartbox", option);
      _this.showChart = true;
      console.log(CA_result);
    },
    // 流域模拟
    FS_PickOutlet() {
      //拾取出水口信息
      this.FS_PickOutletTag = !this.FS_PickOutletTag;
      if (this.FS_PickOutletTag) {
        this.$notify.info({
          title: "开启站点信息拾取！",
        });
      } else {
        this.$notify.info({
          title: "关闭站点信息拾取！",
        });
      }
    },
    // 流域模拟
    EF_PickOutlet() {
      //拾取出水口信息
      this.EF_PickOutletTag = !this.EF_PickOutletTag;
      if (this.EF_PickOutletTag) {
        this.$notify.info({
          title: "开启站点信息拾取！",
        });
      } else {
        this.$notify.info({
          title: "关闭站点信息拾取！",
        });
      }
    },
    InitStaus() {
      const _this = this;
      //1.判断参数是否输入完整
      if (this.InitStausForm.riverbasin == "") {
        this.$notify.error({
          title: "请输入流域！",
        });
        return;
      }
      if (this.InitStausForm.outLetName == "") {
        this.$notify.error({
          title: "请输入出水口信息！",
        });
        return;
      }
      if (this.InitStausForm.startTime == "") {
        this.$notify.error({
          title: "请选择开始时间！",
        });
        return;
      }
      if (this.InitStausForm.warmupTime == "") {
        this.$notify.error({
          title: "请选择预热期！",
        });
        return;
      }
      if (this.InitStausForm.endTime == "") {
        this.$notify.error({
          title: "请选择结束时间！",
        });
        return;
      }
      if (this.InitStausForm.step == "") {
        this.$notify.error({
          title: "请设置时间步长！",
        });
        return;
      }

      if (this.InitStausForm.model1 == "") {
        this.$notify.error({
          title: "请选择产流模型！",
        });
        return;
      }
      if (this.InitStausForm.model2 == "") {
        this.$notify.error({
          title: "模型配置错误！",
          message: "请选择流域汇流模型",
        });
        return;
      }
      if (this.InitStausForm.daModel == "") {
        this.$notify.error({
          title: "同化模型配置错误！",
          message: "请选择数据同化模型",
        });
        return;
      }

      this.ISLoader = true;
      axios
        .post(config.ip + "InitStaus", this.InitStausForm)
        .then((resp) => {
          if (resp.data === "OK") {
            _this.$notify.success({
              title: "初始化结束！",
            });
            _this.ISLoader = false;
          }


          // 模拟结果展示



        });

    },
    HydroProProcessM(tag1) {
      const _this = this;
      this.HydroProProcessForm.tag = tag1
      //1.判断参数是否输入完整
      if (this.HydroProProcessForm.riverbasin == "") {
        this.$notify.error({
          title: "请输入流域！",
        });
        return;
      }
      if (this.HydroProProcessForm.outLetName == "") {
        this.$notify.error({
          title: "请输入出水口信息！",
        });
        return;
      }
      if (this.HydroProProcessForm.startTime == "") {
        this.$notify.error({
          title: "请选择开始时间！",
        });
        return;
      }
      if (this.HydroProProcessForm.forecastTime == "") {
        this.$notify.error({
          title: "请选择预见期！",
        });
        return;
      }
      if (this.HydroProProcessForm.endTime == "") {
        this.$notify.error({
          title: "请选择结束时间！",
        });
        return;
      }
      if (this.HydroProProcessForm.step == "") {
        this.$notify.error({
          title: "请设置时间步长！",
        });
        return;
      }

      if (this.HydroProProcessForm.model1 == "") {
        this.$notify.error({
          title: "请选择前处理模型！",
        });
        return;
      }
      this.HydroProProcessForm.HPPLoader = true;

      axios.post(config.ip + "HydroProProcess", this.HydroProProcessForm).then(resp => {
        _this.HydroProProcessForm.HPPLoader = false;
        _this.HydroProProcessResult = resp.data;
        console.log(resp.data)
        _this.showEnsembleForecastResult("HydroProProcess")
      })



    },
    FSSimulation(ShowTag) {

      const _this = this;
      //1.判断参数是否输入完整
      if (this.FSForm.riverbasin == "") {
        this.$notify.error({
          title: "请输入流域！",
        });
        return;
      }
      if (this.FSForm.outLetName == "") {
        this.$notify.error({
          title: "请输入出水口信息！",
        });
        return;
      }
      if (this.FSForm.startTime == "") {
        this.$notify.error({
          title: "请选择开始时间！",
        });
        return;
      }
      if (this.FSForm.warmupTime == "") {
        this.$notify.error({
          title: "请选择预热期！",
        });
        return;
      }
      if (this.FSForm.endTime == "") {
        this.$notify.error({
          title: "请选择结束时间！",
        });
        return;
      }
      if (this.FSForm.step == "") {
        this.$notify.error({
          title: "请设置时间步长！",
        });
        return;
      }

      if (this.FSForm.model1 == "") {
        this.$notify.error({
          title: "请选择产流模型！",
        });
        return;
      }
      if (this.FSForm.model2 == "") {
        this.$notify.error({
          title: "模型配置错误！",
          message: "请选择流域汇流模型",
        });
        return;
      }

      // const CAcontainer = document.getElementById("CAcontainer");
      // CAcontainer.scrollTop = 0;
      // CAcontainer.style.overflow = "hidden";
      this.CFLoader = true;
      this.FSForm.ifShow = ShowTag
      console.log("FSForm:" + this.FSForm)

      axios
        .post(config.ip + "StreamFlowSimulation", this.FSForm)
        .then((resp) => {
          _this.FS_result = resp.data;
          _this.CFLoader = false;

          // 模拟结果展示

          let option = {
            title: {
              left: "center",
              text: "水文模拟结果",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              right: "10%",
              data: ['模拟径流', '观测径流']
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 10,
                end: 20,
              },
              {
                type: "inside",
                realtime: true,
                start: 10,
                end: 20,
              },
            ],
            xAxis: {
              type: "category",
              name: "时间",
              // axisLine: { onZero: false },
              data: _this.FS_result.times,
            },
            yAxis: {
              type: "value",
              name: "径流量（m³）",
            },
            series: [
              {
                name: "模拟径流",
                data: _this.FS_result.value1,
                type: "line",

                // smooth: true,
              },
              {
                name: "观测径流",
                data: _this.FS_result.value2,
                type: "line",
                itemStyle: {
                  normal: {
                    color: "#FF0000", //改变折线点的颜色
                    lineStyle: {
                      color: '#FF0000' // 自定义折线颜色
                    },
                  },


                },

                // smooth: true,
              },
            ],
          };
          _this.showChartPanel("chartbox", option);
          _this.showChart = true;
          // CAcontainer.style.overflow = "auto";
        });

      // setTimeout(() => {
      //   _this.calibrationLoader = false;
      //   _this.showImage = true;
      //   CAcontainer.style.overflow = "auto";
      // }, 5000);
    },
    ParamRec() {
      this.ShowParamRec = !this.ShowParamRec;

      this.ParamRecSent = {
        model: this.FSForm.model1,
        showTag: "this.ShowParamRec",
      };
    },
    getParamRecInfo(paramRecInfo) {
      // console.log(paramRecInfo);
      this.ShowParamRec = paramRecInfo.showTag;
      this.FSForm.parameter = paramRecInfo.parameter.model;
    },
    // showFSResult() {
    //   // 判断是否有处理结果
    //   const lengTm = this.FS_result.times.length;
    //   const lengVal = this.FS_result.values.length;
    //   if (lengVal <= 0 && lengTm <= 0) {
    //     this.$notify.error({
    //       title: "错误",
    //       message: "没有结果数据！",
    //     });
    //     return;
    //   }

    //   let option = {
    //     title: {
    //       left: "center",
    //       text: "水文模拟结果",
    //     },
    //     tooltip: {
    //       trigger: "axis",
    //       axisPointer: {
    //         type: "cross",
    //         animation: false,
    //         label: {
    //           backgroundColor: "#505765",
    //         },
    //       },
    //     },
    //     legend: {},
    //     dataZoom: [
    //       {
    //         show: true,
    //         realtime: true,
    //         start: 10,
    //         end: 20,
    //       },
    //       {
    //         type: "inside",
    //         realtime: true,
    //         start: 10,
    //         end: 20,
    //       },
    //     ],
    //     xAxis: {
    //       type: "category",
    //       name: "时间",
    //       // axisLine: { onZero: false },
    //       data: this.FS_result.times,
    //     },
    //     yAxis: {
    //       type: "value",
    //       name: "径流量（mm）",
    //     },
    //     series: [
    //       {
    //         data: this.FS_result.values,
    //         type: "line",
    //         // smooth: true,
    //       },
    //     ],
    //   };
    //   this.showChartPanel("chartbox", option);
    //   this.showChart = true;
    // },
    // 水文后处理
    HyPP_PickOutlet() {
      //拾取出水口信息
      this.HyPP_PickOutletTag = !this.HyPP_PickOutletTag;
      if (this.HyPP_PickOutletTag) {
        this.$notify.info({
          title: "开启站点信息拾取！",
        });
      } else {
        this.$notify.info({
          title: "关闭站点信息拾取！",
        });
      }
    },
    HydroPostProcessing(ifShow) {
      const _this = this;
      //1.判断参数是否输入完整
      if (this.HyPPForm.riverbasin == "") {
        this.$notify.error({
          title: "请输入流域！",
        });
        return;
      }
      if (this.HyPPForm.outLetName == "") {
        this.$notify.error({
          title: "请输入出水口信息！",
        });
        return;
      }
      if (this.HyPPForm.startForcast == "") {
        this.$notify.error({
          title: "请选择开始时间！",
        });
        return;
      }
      if (this.HyPPForm.forcastTime == "") {
        this.$notify.error({
          title: "请选择结束时间！",
        });
        return;
      }
      if (this.HyPPForm.leadtime == "") {
        this.$notify.error({
          title: "请设置预见期！",
        });
        return;
      }
      if (this.HyPPForm.step == "") {
        this.$notify.error({
          title: "请设置时间步长！",
        });
        return;
      }
      if (this.HyPPForm.roffModel == "") {
        this.$notify.error({
          title: "请选择产流模型！",
        });
        return;
      }
      if (this.HyPPForm.routModel == "") {
        this.$notify.error({
          title: "请选择汇流模型！",
        });
        return;
      }
      // if (this.HyPPForm.na == "") {
      //   this.$notify.error({
      //     title: "请设置分析期长度",
      //   });
      //   return;
      // }
      // if (this.HyPPForm.buffer == "") {
      //   this.$notify.error({
      //     title: "请设置训练期窗口",
      //   });
      //   return;
      // }
      // if (this.HyPPForm.n_mem_generate == "") {
      //   this.$notify.error({
      //     title: "请设置集合成员数量",
      //   });
      //   return;
      // }
      // 滚动条滚动到顶部
      const CAcontainer = document.getElementById("HyPPcontainer");
      CAcontainer.scrollTop = 0;
      CAcontainer.style.overflow = "hidden";
      this.HyPPForm.ifShow = ifShow


      this.HyPPLoader = true;
      axios
        .post(config.ip + "HydroPostProcessing", this.HyPPForm)
        .then((resp) => {
          _this.HyPPLoader = false;
          const element = resp.data;
          _this.HyPP_result.forecast.times = element.time;
          _this.HyPP_result.forecast.obs = element.obs;
          _this.HyPP_result.forecast.Q05 = element.Q05;
          _this.HyPP_result.forecast.Q25 = element.Q25;
          _this.HyPP_result.forecast.Q50 = element.Q50;
          _this.HyPP_result.forecast.Q75 = element.Q75;
          _this.HyPP_result.forecast.Q95 = element.Q95;

          // if (_this.HyPPForm.mode) {
          //   for (let index = 0; index < resp.data.values.length; index++) {
          //     const element = resp.data;

          //   }
          // } else {
          //   for (let index = 0; index < resp.data.values.length; index++) {
          //     const element = resp.data.values[index];
          //     _this.HyPP_result.simu.times[index] = element[1];
          //     _this.HyPP_result.simu.simu[index] = element[2];
          //     _this.HyPP_result.simu.obs[index] = element[3];
          //     _this.HyPP_result.simu.Q05[index] = element[4];
          //     _this.HyPP_result.simu.Q25[index] = element[5];
          //     _this.HyPP_result.simu.Q50[index] = element[6];
          //     _this.HyPP_result.simu.Q75[index] = element[7];
          //     _this.HyPP_result.simu.Q95[index] = element[8];
          //   }
          // }
          CAcontainer.style.overflow = "auto";
          _this.showHyPPResult(true);
          // let Q1 = new Array();
          // let Q2 = new Array();
          // let Q3 = new Array();
          // let test = new Array();
          // for (let index = 0; index < _this.HyPP_result.Q05.length; index++) {
          //   Q1.push(
          //     _this.HyPP_result.Q25[index] - _this.HyPP_result.Q05[index]
          //   );
          //   Q2.push(
          //     _this.HyPP_result.Q75[index] - _this.HyPP_result.Q25[index]
          //   );
          //   Q3.push(
          //     _this.HyPP_result.Q95[index] - _this.HyPP_result.Q75[index]
          //   );
          //   test.push(0);
          // }
          // _this.HyPPLoader = false;
          // CAcontainer.style.overflow = "auto";
          // 结果展示
          // let option = {
          //   title: {
          //     left: "center",
          //     text: "预测区间图",
          //   },
          //   tooltip: {
          //     trigger: "axis",
          //     axisPointer: {
          //       type: "cross",
          //       animation: false,
          //       label: {
          //         backgroundColor: "#505765",
          //       },
          //     },
          //   },
          //   legend: {
          //     data: ["simu", "obs", "median", "5%-95%", "25%-75%"],
          //     top: "26px",
          //   },
          //   dataZoom: [
          //     {
          //       show: true,
          //       realtime: true,
          //       start: 0,
          //       end: 100,
          //     },
          //     {
          //       type: "inside",
          //       realtime: true,
          //       start: 0,
          //       end: 100,
          //     },
          //   ],
          //   xAxis: {
          //     type: "category",
          //     name: "时间",
          //     // axisLine: { onZero: false },
          //     data: _this.HyPP_result.times,
          //   },
          //   yAxis: {
          //     type: "value",
          //     name: "径流量（m³/s）",
          //   },
          //   series: [
          //     {
          //       name: "Q05",
          //       data: _this.HyPP_result.Q05,
          //       type: "line",
          //       stack: "Total",
          //       showSymbol: false, //线上是否显示小圆点
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgba(255,255,255,0)",
          //         },
          //       },
          //       tooltip: {
          //         show: false,
          //       },
          //       areaStyle: {
          //         color: "rgba(255,255,255,1)",
          //       },
          //       emphasis: {
          //         focus: "series",
          //       },
          //       // smooth: true,
          //     },
          //     {
          //       name: "Q1",
          //       data: Q1,
          //       type: "line",
          //       stack: "Total",
          //       showSymbol: false, //线上是否显示小圆点
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(145,232,77)",
          //         },
          //       },
          //       tooltip: {
          //         show: false,
          //       },
          //       areaStyle: {
          //         color: "rgb(64,168,168)",
          //       },
          //       emphasis: {
          //         focus: "series",
          //       },
          //       // smooth: true,
          //     },
          //     {
          //       name: "Q2",
          //       data: Q2,
          //       type: "line",
          //       showSymbol: false, //线上是否显示小圆点
          //       stack: "Total",
          //       tooltip: {
          //         show: false,
          //       },
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(145,232,77)",
          //         },
          //       },
          //       areaStyle: {
          //         color: "rgb(145,232,77)",
          //       },
          //       emphasis: {
          //         focus: "series",
          //       },
          //       // smooth: true,
          //     },
          //     {
          //       name: "Q3",
          //       data: Q3,
          //       type: "line",
          //       tooltip: {
          //         show: false,
          //       },
          //       showSymbol: false, //线上是否显示小圆点
          //       stack: "Total",
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(64,168,168)",
          //         },
          //       },
          //       areaStyle: {
          //         color: "rgb(64,168,168)",
          //       },
          //       emphasis: {
          //         focus: "series",
          //       },
          //       // smooth: true,
          //     },
          //     {
          //       name: "simu",
          //       data: _this.HyPP_result.simu,
          //       type: "line",
          //       // smooth: true,
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(0,0,0)",
          //         },
          //       },
          //     },
          //     {
          //       name: "obs",
          //       data: _this.HyPP_result.obs,
          //       type: "line",
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(255,0,0)",
          //         },
          //       },
          //       // smooth: true,
          //     },
          //     {
          //       name: "median",
          //       data: _this.HyPP_result.Q50,
          //       type: "line",
          //       lineStyle: {
          //         type: "dashed",
          //         color: "rgb(17,27,234)",
          //       },
          //       // smooth: true,
          //     },
          //     {
          //       name: "5%-95%",
          //       type: "bar",
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(64,168,168)",
          //         },
          //       },
          //       tooltip: {
          //         show: false,
          //       },
          //       data: test,
          //     },
          //     {
          //       name: "25%-75%",
          //       type: "bar",
          //       itemStyle: {
          //         // 设置线条颜色（和图例的颜色）
          //         normal: {
          //           color: "rgb(145,232,77)",
          //         },
          //       },
          //       tooltip: {
          //         show: false,
          //       },
          //       data: test,
          //     },
          //   ],
          // };
          // _this.showChartPanel("chartbox", option);
          // _this.showChart = true;
        });
    },
    showHyPPResult(mode) {
      let option;
      let chatData;
      let Q1 = new Array();
      let Q2 = new Array();
      let Q3 = new Array();
      let test = new Array();
      switch (mode) {
        case true:
          chatData = this.HyPP_result.forecast;
          Q1 = [];
          Q2 = [];
          Q3 = [];
          test = [];

          for (let index = 0; index < chatData.times.length; index++) {
            Q1.push(chatData.Q25[index] - chatData.Q05[index]);
            Q2.push(chatData.Q75[index] - chatData.Q25[index]);
            Q3.push(chatData.Q95[index] - chatData.Q75[index]);
            test.push(0);
          }
          if (Q1.length <= 0) {
            this.$notify.error({
              title: "缺少原始集合预报水文后处理数据！！！",
            });
            return;
          }

          // 结果展示
          option = {
            title: {
              left: "center",
              text: "原始预报后处理结果",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              data: ["观测径流", "集合预报中位数", "90%区间", "50%区间"],
              top: "26px",
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            xAxis: {
              type: "category",
              name: "时间",
              // axisLine: { onZero: false },
              data: chatData.times,
            },
            yAxis: {
              type: "value",
              name: "径流量（m³/s）",
            },
            series: [
              {
                name: "Q05",
                data: chatData.Q05,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgba(255,255,255,0)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgba(255,255,255,1)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q1",
                data: Q1,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q2",
                data: Q2,
                type: "line",
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                areaStyle: {
                  color: "rgb(145,232,77)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q3",
                data: Q3,
                type: "line",
                tooltip: {
                  show: false,
                },
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "观测径流",
                data: chatData.obs,
                type: "line",
                // smooth: true,
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(255,0,0)",
                  },
                },
              },

              {
                name: "集合预报中位数",
                data: chatData.Q50,
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "rgb(17,27,234)",
                },
                // smooth: true,
              },
              {
                name: "90%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: test,
              },
              {
                name: "50%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: test,
              },
            ],
          };
          break;

        case false:
          chatData = this.HyPP_result.simu;

          Q1 = [];
          Q2 = [];
          Q3 = [];
          test = [];

          for (let index = 0; index < chatData.times.length; index++) {
            Q1.push(chatData.Q25[index] - chatData.Q05[index]);
            Q2.push(chatData.Q75[index] - chatData.Q25[index]);
            Q3.push(chatData.Q95[index] - chatData.Q75[index]);
            test.push(0);
          }
          if (Q1.length <= 0) {
            this.$notify.error({
              title: "缺少模拟径流水文后处理数据！！！",
            });
            return;
          }
          // 结果展示
          option = {
            title: {
              left: "center",
              text: "模拟径流后处理结果",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              data: [
                "模拟径流",
                "观测径流",
                "集合预报中位数",
                "90%区间",
                "50%区间",
              ],
              top: "26px",
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            xAxis: {
              type: "category",
              name: "时间",
              // axisLine: { onZero: false },
              data: chatData.times,
            },
            yAxis: {
              type: "value",
              name: "径流量（m³/s）",
            },
            series: [
              {
                name: "Q05",
                data: chatData.Q05,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgba(255,255,255,0)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgba(255,255,255,1)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q1",
                data: Q1,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q2",
                data: Q2,
                type: "line",
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                areaStyle: {
                  color: "rgb(145,232,77)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q3",
                data: Q3,
                type: "line",
                tooltip: {
                  show: false,
                },
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "模拟径流",
                data: chatData.simu,
                type: "line",
                // smooth: true,
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(0,0,0)",
                  },
                },
              },
              {
                name: "观测径流",
                data: chatData.obs,
                type: "line",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(255,0,0)",
                  },
                },
                // smooth: true,
              },
              {
                name: "集合预报中位数",
                data: chatData.Q50,
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "rgb(17,27,234)",
                },
                // smooth: true,
              },
              {
                name: "90%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: test,
              },
              {
                name: "50%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: test,
              },
            ],
          };
          break;
      }
      this.showChartPanel("chartbox", option);
      this.showChart = true;
    },
    HyPPmodeChange() {
      if (this.HyPPForm.mode) {
        this.HyPPForm.n_mem_generate = 5;
      } else {
        this.HyPPForm.n_mem_generate = 500;
      }
    },
    // showHyPPResult(chartType) {
    //   // 判断是否有处理结果
    //   const lengTm = this.HyPP_result.times.length;
    //   const lengVal = this.HyPP_result.simu.length;
    //   if (lengVal <= 0 && lengTm <= 0) {
    //     this.$notify.error({
    //       title: "错误",
    //       message: "没有结果数据！",
    //     });
    //     return;
    //   }
    //   let test = new Array(this.HyPP_result.times.length).fill(0);
    //   let option;
    //   switch (chartType) {
    //     case "超越概率":
    //       // 数据预处理

    //       let Q25 = new Array();
    //       let Q50 = new Array();
    //       let Q75 = new Array();
    //       let Q90 = new Array();
    //       let Q100 = new Array();
    //       for (let index = 0; index < this.HyPP_result.Q05.length; index++) {
    //         Q25.push(this.HyPP_result.Q25[index] - this.HyPP_result.Q05[index]);
    //         Q50.push(this.HyPP_result.Q50[index] - this.HyPP_result.Q25[index]);
    //         Q75.push(this.HyPP_result.Q75[index] - this.HyPP_result.Q50[index]);
    //         Q90.push(this.HyPP_result.Q90[index] - this.HyPP_result.Q75[index]);
    //         Q100.push(
    //           this.HyPP_result.Q100[index] - this.HyPP_result.Q90[index]
    //         );
    //       }
    //       option = {
    //         title: {
    //           left: "center",
    //           text: "超越概率图",
    //         },
    //         tooltip: {
    //           trigger: "axis",
    //           axisPointer: {
    //             type: "cross",
    //             animation: false,
    //             label: {
    //               backgroundColor: "#505765",
    //             },
    //           },
    //         },
    //         legend: {
    //           data: [
    //             "simu",
    //             "obs",
    //             "<10%",
    //             "10%-25%",
    //             "25%-50%",
    //             "20%-75%",
    //             "75%-95%",
    //           ],

    //           top: "26px",
    //           left: "100px",
    //         },
    //         dataZoom: [
    //           {
    //             show: true,
    //             realtime: true,
    //             start: 0,
    //             end: 100,
    //           },
    //           {
    //             type: "inside",
    //             realtime: true,
    //             start: 0,
    //             end: 100,
    //           },
    //         ],
    //         xAxis: {
    //           type: "category",
    //           name: "时间",
    //           // axisLine: { onZero: false },
    //           data: this.HyPP_result.times,
    //         },
    //         yAxis: {
    //           type: "value",
    //           name: "径流量（m³/s）",
    //         },
    //         series: [
    //           {
    //             name: "Q05",
    //             data: this.HyPP_result.Q05,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgba(255,255,255,0)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgba(255,255,255,1)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "Q25",
    //             data: Q25,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(190,190,190)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgb(190,190,190)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "75%-95%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(190,190,190)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //           {
    //             name: "Q50",
    //             data: Q50,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(64,64,255)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgb(64,64,255)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "50%-75%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(64,64,255)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //           {
    //             name: "Q75",
    //             data: Q75,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,255,64)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgb(255,255,64)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "25%-50%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,255,64)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //           {
    //             name: "Q90",
    //             data: Q90,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,187,64)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgb(255,187,64)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "10%-25%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,187,64)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //           {
    //             name: "Q100",
    //             data: Q100,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,64,64)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgb(255,64,64)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "<10%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,64,64)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //           {
    //             name: "simu",
    //             data: this.HyPP_result.simu,
    //             type: "line",
    //             // smooth: true,
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(0,0,0)",
    //               },
    //             },
    //           },
    //           {
    //             name: "obs",
    //             data: this.HyPP_result.obs,
    //             type: "line",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,0,0)",
    //               },
    //             },
    //             // smooth: true,
    //           },
    //         ],
    //       };
    //       break;
    //     case "预测区间":
    //       let Q1 = new Array();
    //       let Q2 = new Array();
    //       let Q3 = new Array();

    //       for (let index = 0; index < this.HyPP_result.Q05.length; index++) {
    //         Q1.push(this.HyPP_result.Q25[index] - this.HyPP_result.Q05[index]);
    //         Q2.push(this.HyPP_result.Q75[index] - this.HyPP_result.Q25[index]);
    //         Q3.push(this.HyPP_result.Q95[index] - this.HyPP_result.Q75[index]);
    //       }
    //       option = {
    //         title: {
    //           left: "center",
    //           text: "预测区间图",
    //         },
    //         tooltip: {
    //           trigger: "axis",
    //           axisPointer: {
    //             type: "cross",
    //             animation: false,
    //             label: {
    //               backgroundColor: "#505765",
    //             },
    //           },
    //         },
    //         legend: {
    //           data: ["simu", "obs", "median", "5%-95%", "25%-75%"],
    //           top: "26px",
    //         },
    //         dataZoom: [
    //           {
    //             show: true,
    //             realtime: true,
    //             start: 0,
    //             end: 100,
    //           },
    //           {
    //             type: "inside",
    //             realtime: true,
    //             start: 0,
    //             end: 100,
    //           },
    //         ],
    //         xAxis: {
    //           type: "category",
    //           name: "时间",
    //           // axisLine: { onZero: false },
    //           data: this.HyPP_result.times,
    //         },
    //         yAxis: {
    //           type: "value",
    //           name: "径流量（m³/s）",
    //         },
    //         series: [
    //           {
    //             name: "Q05",
    //             data: this.HyPP_result.Q05,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgba(255,255,255,0)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgba(255,255,255,1)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "Q1",
    //             data: Q1,
    //             type: "line",
    //             stack: "Total",
    //             showSymbol: false, //线上是否显示小圆点
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(145,232,77)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             areaStyle: {
    //               color: "rgb(64,168,168)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "Q2",
    //             data: Q2,
    //             type: "line",
    //             showSymbol: false, //线上是否显示小圆点
    //             stack: "Total",
    //             tooltip: {
    //               show: false,
    //             },
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(145,232,77)",
    //               },
    //             },
    //             areaStyle: {
    //               color: "rgb(145,232,77)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "Q3",
    //             data: Q3,
    //             type: "line",
    //             tooltip: {
    //               show: false,
    //             },
    //             showSymbol: false, //线上是否显示小圆点
    //             stack: "Total",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(64,168,168)",
    //               },
    //             },
    //             areaStyle: {
    //               color: "rgb(64,168,168)",
    //             },
    //             emphasis: {
    //               focus: "series",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "simu",
    //             data: this.HyPP_result.simu,
    //             type: "line",
    //             // smooth: true,
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(0,0,0)",
    //               },
    //             },
    //           },
    //           {
    //             name: "obs",
    //             data: this.HyPP_result.obs,
    //             type: "line",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(255,0,0)",
    //               },
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "median",
    //             data: this.HyPP_result.Q50,
    //             type: "line",
    //             lineStyle: {
    //               type: "dashed",
    //               color: "rgb(17,27,234)",
    //             },
    //             // smooth: true,
    //           },
    //           {
    //             name: "5%-95%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(64,168,168)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //           {
    //             name: "25%-75%",
    //             type: "bar",
    //             itemStyle: {
    //               // 设置线条颜色（和图例的颜色）
    //               normal: {
    //                 color: "rgb(145,232,77)",
    //               },
    //             },
    //             tooltip: {
    //               show: false,
    //             },
    //             data: test,
    //           },
    //         ],
    //       };
    //       break;
    //     default:
    //       break;
    //   }

    //   this.showChartPanel("chartbox", option);
    //   this.showChart = true;
    // },
    // 水文集合预报
    EnsembleForecast(type) {
      this.EnsembleForecastLoader = true;
      const _this = this;

      if (this.EnsembleForm.basinName == "") {
        this.$notify.error({
          title: "请提取出水口信息！",
        });
        return;
      }
      if (this.EnsembleForm.riverbasin == "") {
        this.$notify.error({
          title: "请设置预报流域！",
        });
        return;
      }
      if (this.EnsembleForm.outLetName == "") {
        this.$notify.error({
          title: "请提取出水口信息！",
        });
        return;
      }
      if (this.EnsembleForm.leadTime == "") {
        this.$notify.error({
          title: "请设置预见期！",
        });
        return;
      }
      if (this.EnsembleForm.timeStep == "") {
        this.$notify.error({
          title: "请设置模拟步长！",
        });
        return;
      }
      if (this.EnsembleForm.roffModel == "") {
        this.$notify.error({
          title: "请选择产流模型！",
        });
        return;
      }
      if (this.EnsembleForm.routModel == "") {
        this.$notify.error({
          title: "请选择汇流模型！",
        });
        return;
      }

      if (type == "simulate") {
        axios
          .post(config.ip + "ensembleStreamFlowHindCasting", this.EnsembleForm)
          .then((resp) => {
            if (!_this.EnsembleForm.mode) {
              // 历史模式
              _this.EnsembleForecastResult.fcst = resp.data;
              _this.showEnsembleForecastResult("runoff");
            } else {
              // 实时模式
              _this.EnsembleForecastResult.relfcst = resp.data;
              _this.showEnsembleForecastResult("runoffreal");
            }

            // _this.EnsembleForecastResult.fcst_pre = JSON.parse(
            //   resp.data.fcst_pre
            // );

            _this.EnsembleForecastLoader = false;

          });
      } else {
        axios
          .post(config.ip + "ensembleStreamFlowHindCastingShow", this.EnsembleForm)
          .then((resp) => {
            if (!_this.EnsembleForm.mode) {
              // 历史模式
              _this.EnsembleForecastResult.fcst = resp.data;
              _this.showEnsembleForecastResult("runoff");
            } else {
              // 实时模式
              _this.EnsembleForecastResult.relfcst = resp.data;
              _this.showEnsembleForecastResult("runoffreal");
            }

            // _this.EnsembleForecastResult.fcst_pre = JSON.parse(
            //   resp.data.fcst_pre
            // );

            _this.EnsembleForecastLoader = false;

          });
      }

    },
    RealTimeEnsembleForecast() {
      this.EnsembleForecastLoader = true;
      const _this = this;
      if (this.realTimeEnsembleForm.riverbasin == "") {
        this.$notify.error({
          title: "请设置预报流域！",
        });
        return;
      }
      if (this.realTimeEnsembleForm.outLetName == "") {
        this.$notify.error({
          title: "请设置出水口！",
        });
        return;
      }
      if (this.realTimeEnsembleForm.leadTime == "") {
        this.$notify.error({
          title: "请设置预见期！",
        });
        return;
      }
      if (this.realTimeEnsembleForm.leadTime == "") {
        this.$notify.error({
          title: "请设置模拟时间！",
        });
        return;
      }
      if (this.realTimeEnsembleForm.roffModel == "") {
        this.$notify.error({
          title: "请选择产流模型！",
        });
        return;
      }
      if (this.realTimeEnsembleForm.routModel == "") {
        this.$notify.error({
          title: "请选择汇流模型！",
        });
        return;
      }

      axios
        .post(
          config.ip + "realTimeEnsembleStreamFlowHindCasting",
          this.realTimeEnsembleForm
        )
        .then((resp) => {
          _this.RealtimeEnsembleForecastResult = JSON.parse(resp.data.fcst);
          _this.EnsembleForecastLoader = false;
          _this.showRealTimeEnsembleForecastResult();
        });
    },
    showEnsembleForecastResult(type) {

      var option;
      switch (type) {
        case "rain":
          var obs_pre = [];
          for (
            let index = 0;
            index < this.EnsembleForecastResult.fcst_pre.time.length;
            index++
          ) {
            obs_pre.push([
              this.EnsembleForecastResult.fcst_pre.time[index],
              this.EnsembleForecastResult.fcst_pre.obs_pre[index],
            ]);
          }
          option = {
            title: [
              {
                text: "降雨集合预报",
                left: "center",
              },
              {
                text: "min: 0.05% 分位数 \nmax: 0.95% 分位数",
                borderColor: "#999",
                borderWidth: 1,
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 14,
                  lineHeight: 20,
                },
                right: "10%",
                top: "1%",
              },
            ],
            legend: {
              data: ["观测降雨"],
              top: "26px",
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            tooltip: {
              trigger: "item",
              axisPointer: {
                type: "shadow",
              },
            },
            grid: {
              left: "10%",
              right: "10%",
              bottom: "20%",
            },
            xAxis: {
              type: "category",
              boundaryGap: true,
              nameGap: 30,
              splitArea: {
                show: false,
              },
              splitLine: {
                show: false,
              },
              data: this.EnsembleForecastResult.fcst_pre.time,
            },
            yAxis: {
              type: "value",
              name: "mm/day 降雨",
              splitArea: {
                show: true,
              },
            },
            series: [
              {
                name: "boxplot",
                type: "boxplot",
                data: this.EnsembleForecastResult.fcst_pre.quantiles_pre,
              },
              {
                name: "观测降雨",
                type: "scatter",
                data: obs_pre,
              },
            ],
          };
          break;
        case "HydroProProcess":
          if (this.HydroProProcessResult.time.length <= 0) {
            this.$notify.error({
              title: "错误",
              message: "没有前处理数据！",
            });
            return;
          }
          let Q21 = new Array();
          let Q22 = new Array();
          let Q23 = new Array();
          let runoffDatarel1 = this.HydroProProcessResult;
          let testrel1 = new Array(runoffDatarel1.time.length).fill(0);
          for (let index = 0; index < runoffDatarel1.time.length; index++) {
            Q21.push(runoffDatarel1.Q25[index] - runoffDatarel1.Q05[index]);
            Q22.push(runoffDatarel1.Q75[index] - runoffDatarel1.Q25[index]);
            Q23.push(runoffDatarel1.Q95[index] - runoffDatarel1.Q75[index]);
          }
          option = {
            title: {
              left: "center",
              text: "水文前处理结果",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              data: ["观测降水", "集合预报中位数", "5%-95%区间", "25%-75%区间"],
              top: "26px",
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            xAxis: {
              type: "category",
              name: "时间",
              // axisLine: { onZero: false },
              data: runoffDatarel1.time,
            },
            yAxis: {
              type: "value",
              name: "降水量（mm）",
            },
            series: [
              {
                name: "Q05",
                data: runoffDatarel1.Q05,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgba(255,255,255,0)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgba(255,255,255,1)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q1",
                data: Q21,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q2",
                data: Q22,
                type: "line",
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                areaStyle: {
                  color: "rgb(145,232,77)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q3",
                data: Q23,
                type: "line",
                tooltip: {
                  show: false,
                },
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "观测降水",
                data: runoffDatarel1.obs,
                type: "line",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(255,0,0)",
                  },
                },
                // smooth: true,
              },
              {
                name: "集合预报中位数",
                data: runoffDatarel1.median,
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "rgb(17,27,234)",
                },
                // smooth: true,
              },
              {
                name: "5%-95%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: testrel1,
              },
              {
                name: "25%-75%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: testrel1,
              },
            ],
          };
          break;
        case "runoff":
          if (this.EnsembleForecastResult.fcst.time.length <= 0) {
            this.$notify.error({
              title: "错误",
              message: "没有历史模式模拟数据！",
            });
            return;
          }
          let Q1 = new Array();
          let Q2 = new Array();
          let Q3 = new Array();
          let runoffData = this.EnsembleForecastResult.fcst;
          let test = new Array(runoffData.time.length).fill(0);
          for (let index = 0; index < runoffData.time.length; index++) {
            Q1.push(runoffData.Q25[index] - runoffData.Q05[index]);
            Q2.push(runoffData.Q75[index] - runoffData.Q25[index]);
            Q3.push(runoffData.Q95[index] - runoffData.Q75[index]);
          }
          option = {
            title: {
              left: "center",
              text: "历史径流集合预报",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              data: ["观测径流", "集合预报中位数", "5%-95%区间", "25%-75%区间"],
              top: "26px",
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            xAxis: {
              type: "category",
              name: "时间",
              // axisLine: { onZero: false },
              data: runoffData.time,
            },
            yAxis: {
              type: "value",
              name: "径流量（m³/s）",
            },
            series: [
              {
                name: "Q05",
                data: runoffData.Q05,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgba(255,255,255,0)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgba(255,255,255,1)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q1",
                data: Q1,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q2",
                data: Q2,
                type: "line",
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                areaStyle: {
                  color: "rgb(145,232,77)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q3",
                data: Q3,
                type: "line",
                tooltip: {
                  show: false,
                },
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "观测径流",
                data: runoffData.obs,
                type: "line",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(255,0,0)",
                  },
                },
                // smooth: true,
              },
              {
                name: "集合预报中位数",
                data: runoffData.median,
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "rgb(17,27,234)",
                },
                // smooth: true,
              },
              {
                name: "5%-95%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: test,
              },
              {
                name: "25%-75%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: test,
              },
            ],
          };
          break;
        case "runoffreal":
          if (this.EnsembleForecastResult.relfcst.time.length <= 0) {
            this.$notify.error({
              title: "错误",
              message: "没有历史模式模拟数据！",
            });
            return;
          }
          let Q11 = new Array();
          let Q12 = new Array();
          let Q13 = new Array();
          let runoffDatarel = this.EnsembleForecastResult.relfcst;
          let testrel = new Array(runoffDatarel.time.length).fill(0);
          for (let index = 0; index < runoffDatarel.time.length; index++) {
            Q11.push(runoffDatarel.Q25[index] - runoffDatarel.Q05[index]);
            Q12.push(runoffDatarel.Q75[index] - runoffDatarel.Q25[index]);
            Q13.push(runoffDatarel.Q95[index] - runoffDatarel.Q75[index]);
          }
          option = {
            title: {
              left: "center",
              text: "实时径流集合预报",
            },
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "cross",
                animation: false,
                label: {
                  backgroundColor: "#505765",
                },
              },
            },
            legend: {
              data: ["观测径流", "集合预报中位数", "5%-95%区间", "25%-75%区间"],
              top: "26px",
            },
            dataZoom: [
              {
                show: true,
                realtime: true,
                start: 0,
                end: 100,
              },
              {
                type: "inside",
                realtime: true,
                start: 0,
                end: 100,
              },
            ],
            xAxis: {
              type: "category",
              name: "时间",
              // axisLine: { onZero: false },
              data: runoffDatarel.time,
            },
            yAxis: {
              type: "value",
              name: "径流量（m³/s）",
            },
            series: [
              {
                name: "Q05",
                data: runoffDatarel.Q05,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgba(255,255,255,0)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgba(255,255,255,1)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q1",
                data: Q11,
                type: "line",
                stack: "Total",
                showSymbol: false, //线上是否显示小圆点
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q2",
                data: Q12,
                type: "line",
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                tooltip: {
                  show: false,
                },
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                areaStyle: {
                  color: "rgb(145,232,77)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "Q3",
                data: Q13,
                type: "line",
                tooltip: {
                  show: false,
                },
                showSymbol: false, //线上是否显示小圆点
                stack: "Total",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                areaStyle: {
                  color: "rgb(64,168,168)",
                },
                emphasis: {
                  focus: "series",
                },
                // smooth: true,
              },
              {
                name: "观测径流",
                data: runoffDatarel.obs,
                type: "line",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(255,0,0)",
                  },
                },
                // smooth: true,
              },
              {
                name: "集合预报中位数",
                data: runoffDatarel.median,
                type: "line",
                lineStyle: {
                  type: "dashed",
                  color: "rgb(17,27,234)",
                },
                // smooth: true,
              },
              {
                name: "5%-95%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(64,168,168)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: testrel,
              },
              {
                name: "25%-75%区间",
                type: "bar",
                itemStyle: {
                  // 设置线条颜色（和图例的颜色）
                  normal: {
                    color: "rgb(145,232,77)",
                  },
                },
                tooltip: {
                  show: false,
                },
                data: testrel,
              },
            ],
          };
          break;
        default:
          break;
      }

      this.showChartPanel("chartbox", option);
      this.showChart = true;
    },
    showRealTimeEnsembleForecastResult() {
      const lengTm = this.RealtimeEnsembleForecastResult.time;

      if (lengTm <= 0) {
        this.$notify.error({
          title: "错误",
          message: "没有结果数据！",
        });
        return;
      }
      var option;

      let Q1 = new Array();
      let Q2 = new Array();
      let Q3 = new Array();
      let runoffData = this.RealtimeEnsembleForecastResult;
      let test = new Array(runoffData.time.length).fill(0);
      for (let index = 0; index < runoffData.time.length; index++) {
        Q1.push(runoffData.Q25[index] - runoffData.Q05[index]);
        Q2.push(runoffData.Q75[index] - runoffData.Q25[index]);
        Q3.push(runoffData.Q95[index] - runoffData.Q75[index]);
      }
      option = {
        title: {
          left: "center",
          text: "实时径流集合预报",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            animation: false,
            label: {
              backgroundColor: "#505765",
            },
          },
        },
        legend: {
          data: ["集合预报中位数", "5%-95%区间", "25%-75%区间"],
          top: "26px",
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 0,
            end: 100,
          },
          {
            type: "inside",
            realtime: true,
            start: 0,
            end: 100,
          },
        ],
        xAxis: {
          type: "category",
          name: "时间",
          // axisLine: { onZero: false },
          data: runoffData.time,
        },
        yAxis: {
          type: "value",
          name: "径流量（m³/s）",
        },
        series: [
          {
            name: "Q05",
            data: runoffData.Q05,
            type: "line",
            stack: "Total",
            showSymbol: false, //线上是否显示小圆点
            itemStyle: {
              // 设置线条颜色（和图例的颜色）
              normal: {
                color: "rgba(255,255,255,0)",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              color: "rgba(255,255,255,1)",
            },
            emphasis: {
              focus: "series",
            },
            // smooth: true,
          },
          {
            name: "Q1",
            data: Q1,
            type: "line",
            stack: "Total",
            showSymbol: false, //线上是否显示小圆点
            itemStyle: {
              // 设置线条颜色（和图例的颜色）
              normal: {
                color: "rgb(145,232,77)",
              },
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              color: "rgb(64,168,168)",
            },
            emphasis: {
              focus: "series",
            },
            // smooth: true,
          },
          {
            name: "Q2",
            data: Q2,
            type: "line",
            showSymbol: false, //线上是否显示小圆点
            stack: "Total",
            tooltip: {
              show: false,
            },
            itemStyle: {
              // 设置线条颜色（和图例的颜色）
              normal: {
                color: "rgb(145,232,77)",
              },
            },
            areaStyle: {
              color: "rgb(145,232,77)",
            },
            emphasis: {
              focus: "series",
            },
            // smooth: true,
          },
          {
            name: "Q3",
            data: Q3,
            type: "line",
            tooltip: {
              show: false,
            },
            showSymbol: false, //线上是否显示小圆点
            stack: "Total",
            itemStyle: {
              // 设置线条颜色（和图例的颜色）
              normal: {
                color: "rgb(64,168,168)",
              },
            },
            areaStyle: {
              color: "rgb(64,168,168)",
            },
            emphasis: {
              focus: "series",
            },
            // smooth: true,
          },

          {
            name: "集合预报中位数",
            data: runoffData.median,
            type: "line",
            lineStyle: {
              type: "dashed",
              color: "rgb(17,27,234)",
            },
            // smooth: true,
          },
          {
            name: "5%-95%区间",
            type: "bar",
            itemStyle: {
              // 设置线条颜色（和图例的颜色）
              normal: {
                color: "rgb(64,168,168)",
              },
            },
            tooltip: {
              show: false,
            },
            data: test,
          },
          {
            name: "25%-75%区间",
            type: "bar",
            itemStyle: {
              // 设置线条颜色（和图例的颜色）
              normal: {
                color: "rgb(145,232,77)",
              },
            },
            tooltip: {
              show: false,
            },
            data: test,
          },
        ],
      };

      this.showChartPanel("chartbox", option);
      this.showChart = true;
    },

    // 预报验证
    verification() {
      const _this = this;
      this.verificationLoader = true;
      axios.post(config.ip + "verification", this.verForm).then((resp) => {
        if (resp.data == "success") {
          this.$notify.success({
            title: "指标计算成功！",
          });
          _this.verificationLoader = false;
        } else {
          this.$notify.error({
            title: "错误",
            message: "请配置计算参数！",
          });
        }
      });
    },
    showVerificationResult(type) {
      const _this = this;

      switch (type) {
        case "curvedLine":
          this.verForm.visualType = "curvedLine";
          break;
        case "boxLine":
          this.verForm.visualType = "boxLine";
          break;
        case "spatialDistribution":
          this.verForm.visualType = "spatialDistribution";

          if (this.showSpatial) {
            this.showSpatial = false;
            this.map.removeLayer(this.verTileLayer);
            return;
          }
          break;
        default:
          break;
      }
      this.verificationLoader = true;
      var option;
      axios
        .post(config.ip + "showVerificationResult", this.verForm)
        .then((resp) => {
          _this.verificationLoader = false;
          if (resp.data == "") {
            this.$notify.error({
              title: "错误",
              message: "请先计算指标！",
            });
            return;
          }
          // 空间分布图
          if (type == "spatialDistribution") {
            _this.showSpatial = true;
            _this.verLayerConfig.layers = resp.data.layers;
            _this.verLayerConfig.max = _this.verLayerConfig.layers.length;
            _this.verTileLayer = new TileLayer({
              source: new TileWMSSource({
                url: "http://localhost:8050/geoserver/GHFSystemData/wms",
                params: {
                  LAYERS: [_this.verLayerConfig.layers[0]],
                },
                serverType: "geoserver",
                crossOrigin: "anonymous",
              }),
            });

            this.map.addLayer(_this.verTileLayer);

            return;
          }
          if (type == "curvedLine") {
            let x = resp.data.x;
            let y = resp.data.y;
            option = {
              title: {
                left: "center",
                text: resp.data.title,
              },
              tooltip: {
                trigger: "axis",
                axisPointer: {
                  type: "cross",
                  animation: false,
                  label: {
                    backgroundColor: "#505765",
                  },
                },
              },
              xAxis: {
                type: "category",
                name: "预见期",
                data: x,
              },
              yAxis: {
                type: "value",
                name: resp.data.indicator,
              },
              series: [
                {
                  data: y,
                  type: "line",
                },
              ],
            };
          } else if (type == "boxLine") {
            let data = resp.data.data;
            option = {
              title: [
                {
                  text: resp.data.title,
                  left: "center",
                },
              ],
              dataset: [
                {
                  // prettier-ignore
                  source: data,
                },
                {
                  transform: {
                    type: "boxplot",
                    config: {
                      itemNameFormatter: function (param) {
                        return param.value + 1;
                      },
                    },
                  },
                },
                {
                  fromDatasetIndex: 1,
                  fromTransformResult: 1,
                },
              ],
              tooltip: {
                trigger: "item",
                axisPointer: {
                  type: "shadow",
                },
              },
              grid: {
                left: "10%",
                right: "10%",
                bottom: "15%",
              },
              xAxis: {
                name: "预见期",
                type: "category",
                boundaryGap: true,
                nameGap: 30,
                splitArea: {
                  show: false,
                },
                splitLine: {
                  show: false,
                },
              },
              yAxis: {
                type: "value",
                name: resp.data.indicator,
                splitArea: {
                  show: true,
                },
              },
              series: [
                {
                  name: "boxplot",
                  type: "boxplot",
                  datasetIndex: 1,
                },
              ],
            };
          }

          var chartContainer = document.getElementById("chart-container");

          chartContainer.style.transform = "translate(-60%, 0)";
          _this.showChartPanel("chartbox", option);
          _this.showChart = true;
        });
    },
    verSliderHander(value) {
      let source = new TileWMSSource({
        url: "http://localhost:8050/geoserver/GHFSystemData/wms",
        params: {
          LAYERS: [this.verLayerConfig.layers[value]],
        },
        serverType: "geoserver",
        crossOrigin: "anonymous",
      });
      this.verTileLayer.setSource(source);
    },
    // 展示模拟结果数据
    showSimulationResult() {
      const configCard = document.getElementById("SimulationResultCard");
      if (configCard.offsetLeft < 0) {
        configCard.style.left = "10px";
      } else {
        const width = configCard.offsetWidth;
        let left = -5 - width;
        configCard.style.left = left + "px";
      }

      // configCard.style.width = "300px";
      // configCard.style.display = "flex";
    },
    // 获取模型配置
    getModelConfig(model) {
      const _this = this;
      this.showConfigCard("freemodelConfig", "right");
      if (this.modelConfig.name == model.name) {
        return;
      }
      axios.post(config.ip + "getModelConfig", model).then((resp) => {
        _this.modelConfig.InParameters = resp.data.Behavior.InParameters;
        _this.modelConfig.OutFiles = resp.data.Behavior.OutFiles;
        _this.modelConfig.name = model.name;
        _this.modelConfig.Operation = resp.data.Behavior.Operation;
        console.log(_this.modelConfig);
      });
    },
    //模型输入数据上传成功
    modelDataUploadSuccess(response, file) {
      this.modelConfig.InParameters[this.modelInputIndex].value = file.name;
    },
    handModelInputIndex(index) {
      this.modelInputIndex = index;
    },
    // 模型运行
    modelOperation(url) {
      var modelInputs = this.modelConfig.InParameters;
      var modelParams = {};
      for (let index = 0; index < modelInputs.length; index++) {
        const element = modelInputs[index];
        if (element.type == "txt") {
          modelParams[element.name] = element.value;
        } else if (element.type == "number") {
          modelParams[element.name] = parseFloat(element.value);
        }
      }

      console.log(modelParams);
      axios.post(url, modelParams).then((resp) => {
        console.log("adda");
      });
    },
    // 模型结果下载
    // 下载文件
    async downFile() {
      let url = this.ip + this.userInfo.id + "/";
      await fetch(url, {
        headers: new Headers({
          Origin: location.origin,
        }),
        mode: "cors",
      })
        .then((response) => response.blob())
        .then((blob) => {
          let blobUrl = window.URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.download = fileName;
          a.href = blobUrl;
          document.body.appendChild(a);
          a.click();
          a.remove();
        })
        .catch((e) => console.error(e));
    },
  },
  mounted() {
    // 默认选择背景图层
    // this.$refs.layertree.setCheckedKeys([this.checkedId]);
    // 初始化图层
    // this.UserInfo.id = this.userInfo.id;
    // this.UserInfo.name = this.userInfo.name;
    // this.UserInfo.passWord = this.userInfo.passWord;
    this.initMap();
    this.menu_txt_cur = this.menu_txt.CN;
    const _this = this;

    axios.post(config.ip + "getModelsbyUser", this.useInfo).then((resp) => {
      let respData = resp.data;

      for (let index = 0; index < respData.length; index++) {
        respData[index].img = config.ip + respData[index].img;
      }
      _this.modellist = [];
      _this.modellist = respData;
    });

    axios.get(config.ip + "getWatershedExtractionInitInfo").then((resp) => {
      let ST_FORCE_FCST = resp.data.ST_FORCE_FCST;
      let ST_FORCE_REFCST = resp.data.ST_FORCE_REFCST;
      let ST_FORCE_HIS = resp.data.ST_FORCE_HIS;
      let ST_HMODEL = resp.data.ST_HMODEL;
      let ST_POST_MODEL = resp.data.ST_POST_MODEL;
      let ST_DA_MODEL = resp.data.ST_DA_MODEL;
      let ST_PRE_MODEL = resp.data.ST_PRE_MODEL;
      let ST_HMODEL_SW = [];
      let ST_HMODEL_SD = [];

      // 模型筛选
      for (let index = 0; index < ST_HMODEL.length; index++) {
        const element = ST_HMODEL[index];
        if (element['TYPE'] === "SW") {
          ST_HMODEL_SW.push({
            value: element["MNAME"],
            label: element["MNAME"],
          })
        } else if (element['TYPE'] === "SD") {
          ST_HMODEL_SD.push({
            value: element["MNAME"],
            label: element["MNAME"],
          })
        }

      }
      _this.importModelForm.importModelOptions = ST_HMODEL_SW;
      _this.CAForm.roffModels = ST_HMODEL_SW;
      _this.CAForm.routModels = ST_HMODEL_SD;
      _this.FSForm.roffModels = ST_HMODEL_SW;
      _this.FSForm.routModels = ST_HMODEL_SD;
      _this.FSForm.routModels.push({
        value: "None",
        label: "None",
      })

      _this.EnsembleForm.roffModels = ST_HMODEL_SW;
      _this.EnsembleForm.routModels = ST_HMODEL_SD;

      _this.HyPPForm.roffModels = ST_HMODEL_SW;
      _this.HyPPForm.routModels = ST_HMODEL_SD;

      let ST_POST_MODEL_Bind = [];
      for (let index = 0; index < ST_POST_MODEL.length; index++) {
        const element = ST_POST_MODEL[index];
        ST_POST_MODEL_Bind.push({
          value: element["POM"],
          label: element["POM"],
        })

      }
      _this.HyPPForm.postProModels = ST_POST_MODEL_Bind;

      _this.InitStausForm.roffModels = ST_HMODEL_SW;
      _this.InitStausForm.routModels = ST_HMODEL_SD;

      let ST_DA_MODEL_bind = [];
      for (let index = 0; index < ST_DA_MODEL.length; index++) {
        const element = ST_DA_MODEL[index];
        ST_DA_MODEL_bind.push({
          value: element["DNAME"],
          label: element["DNAME"],
        })
      }
      _this.InitStausForm.daModels = ST_DA_MODEL_bind;

      let ST_PRE_MODEL_bind = [];
      for (let index = 0; index < ST_PRE_MODEL.length; index++) {
        const element = ST_PRE_MODEL[index];
        ST_PRE_MODEL_bind.push({
          value: element["PEM"],
          label: element["PEM"],
        })
      }
      _this.HydroProProcessForm.ProProcessModels = ST_PRE_MODEL_bind;


      // 气象观测数据读取
      let ST_FORCE_HIS_Bind = [];
      for (let index = 0; index < ST_FORCE_HIS.length; index++) {
        const element = ST_FORCE_HIS[index];
        ST_FORCE_HIS_Bind.push(
          {
            value: element["FH_NAME"],
            label: element["FH_NAME"],
          }
        )
      }
      _this.importModelForm.ST_FORCE_HIS = ST_FORCE_HIS_Bind;

      // 历史气象预报数据读取
      let ST_FORCE_REFCST_Bind = [];
      for (let index = 0; index < ST_FORCE_REFCST.length; index++) {
        const element = ST_FORCE_REFCST[index];
        ST_FORCE_REFCST_Bind.push(
          {
            value: element["FRF_NAME"],
            label: element["FRF_NAME"],
          }
        )
      }
      _this.importModelForm.reforecastdata = ST_FORCE_REFCST_Bind;
    })

    // axios.get(config.ip + "getInitInformation").then((resp) => {
    //   _this.initInformation = resp.data;

    //   let ST_HMODEL = _this.initInformation.ST_HMODEL;
    //   let ST_FORCE_HIS = _this.initInformation.ST_FORCE_HIS;
    //   let ST_FORCE_NEAR = _this.initInformation.ST_FORCE_NEAR;
    //   let ST_FORCE_FCST = _this.initInformation.ST_FORCE_FCST;
    //   _this.importModelForm.importModelOptions = [];
    //   _this.CAForm.disModels = [];
    //   _this.FSForm.disModels = [];
    //   _this.realTimeEnsembleForm.disModels = [];
    //   _this.importModelForm.ST_FORCE_HIS = [];
    //   for (let index = 0; index < ST_HMODEL.length; index++) {
    //     const hMODEL_Element = ST_HMODEL[index];

    //     if (hMODEL_Element["TYPE"] == "DIS") {
    //       _this.importModelForm.importModelOptions.push({
    //         value: hMODEL_Element["MNAME"],
    //         label: hMODEL_Element["MNAME"],
    //       });
    //       _this.modelsInfo.disModels.push({
    //         value: hMODEL_Element["MNAME"],
    //         label: hMODEL_Element["MNAME"],
    //       });
    //     } else if (hMODEL_Element["TYPE"] == "ROFF") {
    //       _this.modelsInfo.roffModels.push({
    //         value: hMODEL_Element["MNAME"],
    //         label: hMODEL_Element["MNAME"],
    //       });
    //     } else if (hMODEL_Element["TYPE"] == "ROUT") {
    //       _this.modelsInfo.routModels.push({
    //         value: hMODEL_Element["MNAME"],
    //         label: hMODEL_Element["MNAME"],
    //       });
    //     } else if (hMODEL_Element["TYPE"] == "RIVER") {
    //       _this.modelsInfo.riverModels.push({
    //         value: hMODEL_Element["MNAME"],
    //         label: hMODEL_Element["MNAME"],
    //       });
    //     }
    //   }
    //   _this.modelsInfo.disModels.push({
    //     value: "None",
    //     label: "None",
    //   });
    //   _this.CAForm.disModels = _this.modelsInfo.disModels;
    //   _this.CAForm.roffModels = _this.modelsInfo.roffModels;
    //   _this.CAForm.routModels = _this.modelsInfo.routModels;
    //   _this.CAForm.rivers = _this.modelsInfo.riverModels;

    //   _this.FSForm.disModels = _this.modelsInfo.disModels;
    //   _this.FSForm.roffModels = _this.modelsInfo.roffModels;
    //   _this.FSForm.routModels = _this.modelsInfo.routModels;

    //   _this.realTimeEnsembleForm.disModels = _this.modelsInfo.disModels;
    //   _this.realTimeEnsembleForm.roffModels = _this.modelsInfo.roffModels;
    //   _this.realTimeEnsembleForm.routModels = _this.modelsInfo.routModels;

    //   _this.importModelForm.importModelOptions.push({
    //     value: "None",
    //     label: "None",
    //   });
    //   for (let index = 0; index < ST_FORCE_HIS.length; index++) {
    //     const HIS_element = ST_FORCE_HIS[index];
    //     _this.importModelForm.ST_FORCE_HIS.push({
    //       value: HIS_element["FH_NAME"],
    //       label: HIS_element["FH_NAME"],
    //     });
    //   }
    //   _this.modelsInfo.forceNear = [];
    //   for (let index = 0; index < ST_FORCE_NEAR.length; index++) {
    //     const element = ST_FORCE_NEAR[index];
    //     _this.modelsInfo.forceNear.push({
    //       value: element["FN_NAME"],
    //       label: element["FN_NAME"],
    //     });
    //   }

    //   _this.modelsInfo.forceFcst = [];
    //   for (let index = 0; index < ST_FORCE_FCST.length; index++) {
    //     const element = ST_FORCE_FCST[index];
    //     _this.modelsInfo.forceFcst.push({
    //       value: element["FF_NAME"],
    //       label: element["FF_NAME"],
    //     });
    //   }

    //   _this.realTimeEnsembleForm.fcstDataSources = _this.modelsInfo.forceFcst;
    //   _this.realTimeEnsembleForm.nearDataSources = _this.modelsInfo.forceNear;
    // });
  },
  components: {
    SAProblemDdfin: SAProblemDdfin,
    SAExpDesign: SAExpDesign,
    SAAnalyze: SAAnalyze,
    SAOpt: SAOpt,
    ParamRec: ParamRec,
  },
};
</script>
<style>
#mapDiv {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}

.importModel {
  position: absolute;
  background: white;
  border-radius: 4px;
  width: fit-content;
  height: fit-content;
  top: 200px;
  left: 200px;
  z-index: 9;
}
</style>
